Question

Is there is a way to intercept/monitor in Javascript that CSS property changed using vanilla Javascript? Like for example change of width property:

.div {
    width:100px;
}

.div:hover {
   width:200px;
}

…

<div class="div">Blah</div>

Edit: I mean not hover state change, I looking to detect that width property of the DIV changed. It might be any other property or any other way of changing properties: For example I did div.className = “div bigBox”, where:

.bigBox { width:200px;height:200px }

and I want to know that height property changed!

Answer 1

You can set up an interval and watch the css property in question:

var cssWatchInterval = false;
function cssWatch (element, property, handler) {
    if (cssWatchInterval !== false)
        clearInterval(cssWatchInterval);
    var comp = element.currentStyle || getComputedStyle(element, null);
    var current_prop_value = comp[property];
    cssWatchInterval = setInterval(function () {
        var comp = element.currentStyle || getComputedStyle(element, null);  
        if (comp[property] != current_prop_value) {
            stopCssWatch();
            handler(element);
        }
    }, 250);
};
function stopCssWatch() {
    clearInterval(cssWatchInterval);
}

Try it here: http://jsfiddle.net/wAtvp/6/