是否有可能收听“风格改变”事件？

javascript jquery

2022-08-30 00:43:20

是否可以在jQuery中创建一个可以绑定到任何样式更改的事件侦听器？例如，如果我想在元素更改尺寸时“执行”某些操作，或者样式属性中的任何其他更改，我可以执行：

$('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);
    }
})();

这将临时覆盖内部原型.css方法，并在末尾使用触发器重新定义它。所以它的工作原理是这样的：

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

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

答案 1

自从提出这个问题以来，事情已经发生了一些变化 - 现在可以使用MutetchObserver来检测元素的“style”属性的变化，不需要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 对象，它允许您获取旧的和新样式的值。

在包括IE 11 +在内的现代浏览器中支持良好。

答案 2

由于jQuery是开源的，我想你可以调整函数，以便在每次调用时调用您选择的函数（传递jQuery对象）。当然，您需要搜索jQuery代码，以确保它没有在内部使用其他方法来设置CSS属性。理想情况下，您需要为jQuery编写一个单独的插件，以便它不会干扰jQuery库本身，但是您必须决定这对于您的项目是否可行。css