Are any events fired on Computed Style Change?

Question

Is there an event I can listen for in JavaScript that tells me the computed style for a particular DOM element has changed?

If not, what is the least blocking way to get the computed style of a DOM element using JavaScript?

Answer 1

There is no event listener for on change of computed style of a DOM element.

You can write one yourself if you are fancy, watching the value of getComputedStyle through setInterval, but it could be expensive and unwieldy depending on implementation.

If you are only worried about style changes on resize you should use the window.onresize (below), or possibly the JQuery resize event handler.

window.onresize = function(event) {
    ...
};

There is a very good read here about in depth cross browser solution for referencing CSS3 properties, however the following is a simple solution for various popular browsers via this answer.

It's not jQuery but, in Firefox, Opera and Safari you can use window.getComputedStyle(element) to get the computed styles for an element and in IE<=8 you can use element.currentStyle. The returned objects are different in each case, and I'm not sure how well either work with elements and styles created using Javascript, but perhaps they'll be useful.

In Safari you can do the following which is kind of neat:

document.getElementById('b').style.cssText = window.getComputedStyle(document.getElementById('a')).cssText;