Css背景颜色根据是否显示div而改变

我正在寻找一种方法来改变页面的背景颜色，这取决于页面上显示的两个div中的哪一个。这是通过ID。有时div id="a"会显示在页面上。有时会显示div id="b"。当显示B时，A将根本不存在。A根本不会被呈现，它不仅会被隐藏或不显示，而是根本不会显示。

我该怎么做?

window.onload = function(){
var ab =document.getElementById('a')
var bod = document.getElementsByTagName('body')[0]
if(ab == null){
    
    bod.style.background='green'
}else{
   bod.style.background='blue'
   
}}

<body>
<div id = 'b'>this is B</div>
</body>

您可以尝试使用jQuery:

var idOfDiv = $('body > div').attr('id');
if ((idOfDiv) === "a") {
  $('body').css('background-color', 'green');
}
else if ((idOfDiv) === "b") {
  $('body').css('background-color', 'blue');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Change the id from a to b OR b to a
<div id="a">
  Lorem Ipsum
</div>

jQuery jQuery jQuery

或者如果你是纯JS，你可以这样做:

var idOfDiv = document.getElementById('a');
if (idOfDiv === null) {
  document.body.style.backgroundColor = 'blue';
} else {
  document.body.style.backgroundColor = 'green';
}

/*Change the id from a to b OR b to a*/
<div id="a">
  Lorem Ipsum
</div>

JS使用纯JavaScript

我很惊讶，因为每个人都用js回答。但是如果你有两个id固定为div的a和b名称，那么你可以在css文件

中实现这一点

div#a{
background-color:red;
}
div#b{
background-color:red;
}

相关内容

最新更新

热门标签：