Is there is a way to intercept/monitor in Javascript that CSS property changed using vanilla Javascript

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!

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/

You cannot detect a class/width change.

You can detect the hover.

document.getElementById('divID').onmouseover = function(event) {
    //do something
}

Instead of polling you may want to look at cssHooks, available in JQuery 1.4.3+

http://api.jquery.com/jQuery.cssHooks/