当 css 值改变时触发事件

Posted 2023-02-16

【中文标题】当 css 值改变时触发事件

【英文标题】：Triggering an event when a css value changes

【发布时间】：2011-02-23 21:56:09

【问题描述】：

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

【问题讨论】：

是什么事件导致 CSS 中的“变量”变化？高度如何变化？是否被拖动/最大化？

高度由另一个 jQuery 命令更改，该命令在文档中产生涟漪。问题是这些变化不会立即传播。我只希望较低的阶段在其父包装准备好时更新。

【参考方案1】：

对此没有“本机”解决方案。如果您严格使用 jQuery 来操作 css 属性，那么 hook 或 (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]

【讨论】：

我明白了，非常感谢。我很惊讶没有原生选项。我正在寻找有点像 .resize();

【参考方案2】：

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