javascript - 当 css 值改变时触发事件

Question

当特定的 CSS 变量发生变化（例如：特定 div 的高度）时，如何使用 jquery 调用函数？

Answer 1

对此没有“本机”解决方案。如果您严格使用 jQuery 来操作 css 属性，那么函数挂钩或 ( duck punshing ) 是您的最佳选择：

(function($) {
    var _oldcss = $.fn.css;
    $.fn.css = function() {
        if( typeof arguments[0] === 'string' ) {
            console.log('css property ', arguments[0], ' is about to change for elem: ', this);
        }

        return _oldcss.apply(this, arguments);
    };
}(jQuery));

这当然是不完整的。如果arguments[0]是，object您将需要遍历键/值。但这是基本原则。

这个解决方案的好处是，它甚至.height()会调用.css(). 所以

$('div:eq(2)').height(55);

将触发css 属性 height is about to change for elem: [div#custom-header]

Answer 2

http://darcyclarke.me/development/detect-attribute-changes-with-jquery/有一些插件方法以及针对不同浏览器的怪癖。它在所有浏览器中模仿 DOMAttrModified 事件。