Yes can do this by using attribute change jquery plugin…
As I can see you want an event to be triggered on color change automatically… So, your code will be something like this with its working example…
$("#myDiv").attrchange({
trackValues: true,
// set to true so that the event object is updated with old & new values
callback: function(evnt) {
if(evnt.newValue.indexOf('background: red') > -1) {
// which attribute you want to watch for changes
alert("DIV IS RED");
}
}
});
function change(x){
document.getElementById("myDiv").style.background=x;
}
#myDiv{
background:green;
}
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://cdn.rawgit.com/meetselva/attrchange/master/js/attrchange.js"></script>
<script src="https://cdn.rawgit.com/meetselva/attrchange/master/js/attrchange_ext.js"></script>
<div id="myDiv">This Div Changes colors</div>
<button onclick="change('red');">Change To Red</button>
<button onclick="change('blue');">Change To Blue</button>
<button onclick="change('green');">Change To Green</button>
The above code will prompt a message when the div turns red…
solved IF DIV color is red? [duplicate]