Question

Something like:

element.addEventListener("displayChanged", function(){
    console.log("element.style.display changed.")
}, false);

Of course, there is no displayChanged there, but I’m wondering how can I do this? Only Chrome support is needed.

Answer 1

You can poll with a setInterval and check for the change using something like:

<div onclick="this.style.display = 'none';">ha</div>
<script>
(function(){
  var elm = document.getElementsByTagName('DIV')[0],
    old = (elm.currentStyle || window.getComputedStyle(elm, false)).display,
    interval = setInterval(function(){
      var style = elm.currentStyle || window.getComputedStyle(elm, false);
      if(old !== style.display){
        clearInterval(interval);
        console.log('changed');
      }
    },120);
})();
</script>