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

Answer 2

首先，您需要获得bigbutton的颜色

var color = $('.bigbutton').css('color');

然后检查一下

if(color == "red"){ //example
 $('.div1').css('top':'10px') // finally do your changes [for example]
}

Answer 3

您可以尝试，HTML代码：

  <div id="container">
   <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; }

javascript代码：

container.onmouseover = container.onmouseout = handler;
function handler(event){
  if (event.type == 'mouseover') {
    if(event.target.className=='div1'){
       event.target.style.background = 'black';
       moveLeft();
    }
    if(event.target.className=='div2'){
      document.getElementsByClassName('div1')[0].style.background = 'yellow';
    }
    if(event.target.className=='div3'){
      document.getElementsByClassName('div1')[0].style.background = 'black';
       moveLeft();
    }
  }
  if (event.type == 'mouseout') {
    if(event.target.className=='div1'){
       event.target.style.background = '';
    }
    if(event.target.className=='div2'){
      document.getElementsByClassName('div1')[0].style.background = '';
    }
    if(event.target.className=='div3'){
      document.getElementsByClassName('div1')[0].style.background = '';
    }
    moveRight();
  }
}

function moveLeft(){
    $('.bigbutton').css('left','200px');
}
function moveRight(){
   $('.bigbutton').css('left','100px');
}

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

3 个答案: