javascript 在单击按钮之前更改CSS

nom7f22z 于 2023-04-28 发布在 Java

关注(0)|答案(1)|浏览(143)

我想使背景灰色当你点击搜索栏，但当你点击搜索栏，我想使CSS回来时，按钮点击每当你点击其他元素除了搜索栏。

$('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   }
  });
});`

JavaScript

来源：https://stackoverflow.com/questions/76120583/changing-css-back-before-when-the-button-is-clicked

1条答案

按热度按时间

hmmo2u0o1#

我已经为你写了一个codepen，示例，以便您可以了解如何才能实现它。
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>

赞(0）回复(0）举报 2023-04-28

我来回答

javascript 在单击按钮之前更改CSS

1条答案

相关问题

热门标签

最新问答