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

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