javascript - 是否可以收听 "style change"事件？

Question

是否可以在 jQuery 中创建一个可以绑定(bind)到任何样式更改的事件监听器？例如，如果我想在元素更改尺寸或样式属性的任何其他更改时“做”某事，我可以做:

$('div').bind('style', function() {
    console.log($(this).css('height'));
});

$('div').height(100); // yields '100'

真的很有用。

有什么想法吗？

更新

很抱歉我自己回答了这个问题，但我写了一个可能适合其他人的巧妙解决方案:

(function() {
    var ev = new $.Event('style'),
        orig = $.fn.css;
    $.fn.css = function() {
        $(this).trigger(ev);
        return orig.apply(this, arguments);
    }
})();

这将临时覆盖内部prototype.css 方法并在最后使用触发器重新定义它。所以它是这样工作的:

$('p').bind('style', function(e) {
    console.log( $(this).attr('style') );
});

$('p').width(100);
$('p').css('color','red');

Answer 1

自从提出问题后，事情发生了一些变化——现在可以使用 MutationObserver检测元素“样式”属性的变化，不需要 jQuery:

var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutationRecord) {
        console.log('style changed!');
    });    
});

var target = document.getElementById('myId');
observer.observe(target, { attributes : true, attributeFilter : ['style'] });

传递给回调函数的参数是 MutationRecord让您掌握新旧样式值的对象。

支持是 good in modern browsers包括 IE 11+。