changing CSS back before when the button is clicked

Question

changing CSS back before when the button is clicked

33 views Asked by 심심은정 At 27 April 2023 at 12:44

I want to make background grey when you click the search bar but when you click out of search bar I want to make CSS back when the button is clicked whenever you click another element except search bar.

$('input#srchInput').click(function(){  
    $("#dropNav .maxWidth").css({"filter":"brightness(48%) grayscale(12%)","background":"#d3d3d3c4"});
    $("div#__nuxt").css({"filter":"brightness(48%) grayscale(12%)","background":"lightgrey"});
    $("div#head").css("background","lightgrey");
    $("#basket>.bskt").css({"color":"#1a1a1a","height":"40px"});
    $("div#head").css("background","#1a1a1a85");
    $("header #head").css("padding-bottom","25px");
    $("#dropNav #nav-menu").css("margin-top","0px");
    $("#uspAll").css("filter","brightness(48%) grayscale(12%)");
    $("#basket").css("filter","brightness(48%) grayscale(12%)");
    $("div#productBrowse").css("filter","brightness(48%) grayscale(12%)"); /* when it's not home */ 
  });
  let body = document.body;
  body.addEventListener('click', function(e) {
  if (e.target.id != 'srchInput')
  { $("#dropNav .maxWidth").css({"all":"initial"});
    $("div#__nuxt").css({"all":"initial"});
    $("div#head").css({"all":"initial"});
    $("#basket>.bskt").css({"all":"initial"});
    $("div#head").css({"all":"initial"});
    $("header #head").css({"all":"initial"});
    $("#dropNav #nav-menu").css({"all":"initial"});
    $("#uspAll").css({"all":"initial"});
    $("#basket").css({"all":"initial"});
    $("div#productBrowse").css({"all":"initial"}); /* when it's not home   }
  });
});`

Original Q&A

There are 1 answers

**prograk** · Answer 1 · 2023-04-27T16:00:44+00:00

I've written a codepen for you, sample so that you can understand how can you achieve it.

https://codepen.io/_makki/pen/zYmzKBp

$('body#example').click(function(event) {
  if (event.target.id === 'search') {
    $('body').css({
      'background': 'gray'
    });
  } else {
    $('body').css({
      'background': 'white'
    });
  }
})

html,
body {
  width: 100%;
  height: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>

<body id="example">
  <header style="height: 40px;">
    <input type="text" name="searchedAll" placeholder="search" id="search" />
  </header>
</body>

</html>

TechQA.

changing CSS back before when the button is clicked

There are 1 answers

Related Questions in JAVASCRIPT

Related Questions in JQUERY

Related Questions in CSS

Related Questions in SEARCH-BOX

Popular Questions

Popular Tags

Trending Questions