听“风格改变”事件有可能吗？

Question

听“风格改变”事件有可能吗？是否可以在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);     }})();这将临时覆盖内部Prototype.css方法，并在最后用触发器重新定义它。所以它是这样工作的：$('p').bind('style', function(e) {     console.log( $(this).attr('style') );});$('p').width(100);$('p').css('color','red');

Answer 1

由于jquery是开放源代码的，所以我想您可以修改css函数来调用您选择的函数(传递jQuery对象)。当然，您需要浏览jQuery代码，以确保它在内部没有使用任何其他方法来设置CSS属性。理想情况下，您希望为jQuery编写一个单独的插件，这样它就不会干扰jQuery库本身，但是您必须决定这对您的项目是否可行。

Answer 2

自从这个问题被提出以来，事情已经有了一些进展-现在可以使用突变观察员要检测元素的“样式”属性中的更改，不需要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'] });

传递给回调函数的参数是诱变d对象，该对象允许您获取旧的和新的样式值。

支持是在现代浏览器中很好包括IE 11+。

Answer 3

事件对象的声明必须在新的CSS函数中。否则，该事件只能触发一次。

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