Change css of inner div when outer div's css change

Question

I would like to know if there is a way to change a div's style when the style of another div changes.

Let's say for example that we have a div (test1), that changes its z-index after 5 sec. I would like to change the css of another div (test2) when test1 has z-index=2 .

Answer 1

I don't think there are built in events for that, but you could use a setInterval like this:

 var divStyle = null; setInterval(function () { var newDivStyle = $("#myDiv").attr("style"); if (newDivStyle !== divStyle) { divStyle = newDivStyle; $("#myDiv").trigger("divStyleChange"); } }, 50); $("#myDiv").bind("divStyleChange", function () { $("#myDiv2").css("background-color", "#"+((1<<24)*Math.random()|0).toString(16)); }); function ChangeColorOfOuterDiv() { $('#myDiv').css('background-color','#'+((1<<24)*Math.random()|0).toString(16)); } 

 #myDiv { width:100px; height:100px; background-color:red; } #myDiv2 { width:50px; height:50px; background-color:yellow; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="myDiv"> <div id="myDiv2"></div> </div> <button onClick="ChangeColorOfOuterDiv()">Change color of outer div</button>