javascript - jquery - 根据其他元素的 CSS 属性控制元素的 CSS 属性

Question

如何根据其他元素的 CSS 属性更改元素的 CSS 属性？例如;如果“div1”的颜色是黑色，我想更改“bigbutton”的默认位置。这是我试过的:

HTML

 <div> <div class="div1"> </div>  <div class="div2"></div> <div class="div3"></div> <button type="button" class="bigbutton">bigbutton </button> </div> 

CSS

.div1{ position:fixed; left: 10px; width:100px; height: 100px; background-color: red; } .div2{ position:fixed; left: 10px; top: 110px; width:100px; height: 100px; background-color: green; } .div3{ position:fixed; left: 10px; top: 220px; width:100px; height: 100px; background-color: teal; .bigbutton{ position: fixed; left: 15px; width: 100px; height: 30px; background-color: blue; }

JQUERY

$(document).ready(function(){ $('.div1').mouseenter(function(){ $(this).css('background','black'); }); $('.div1').mouseleave(function(){ $(this).css('background',''); }); $('.div2').mouseenter(function(){ $('.div1').css('background','yellow'); }); $('.div2').mouseleave(function(){ $('.div1').css('background',''); }); $('.div3').mouseenter(function(){ $('.div1').css('background','black'); }); $('.div3').mouseleave(function(){ $('.div1').css('background',''); }); if($('.div').css('background') == 'black'){ $('.bigbutton').css('left','200px'); } else{ $('.bigbutton').css('left','100px'); } });

是否可以不用 if-else 来实现？PS:对于格式化问题，我深表歉意，因为我的手机几乎不可能正确格式化。谢谢。

Answer 1

当您说“根据 y 更改 x”时，您基本上是在描述一个 if 条件。鉴于您的示例，您还可以通过更改按钮在 div1 变为黑色的同一代码块中的位置来获得所需的结果:https://codepen.io/pen/RvXQMP

---

更新

要为任何会改变 div1 颜色的输入获得所需的结果，您可以使用 Mutation observer ，就像 DOM 更改的 eventListener 一样工作:https://codepen.io/pen/PVMVzw