是否有可能在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');

当前回答

我认为最好的答案来自Mike在你不能启动事件的情况下,因为不是来自你的代码。但是当我使用它时,我得到一些错误。所以我写了一个新的答案给你们看我用的代码。

扩展

// Extends functionality of ".css()"
// This could be renamed if you'd like (i.e. "$.fn.cssWithListener = func ...")
(function() {
    orig = $.fn.css;
    $.fn.css = function() {
        var result = orig.apply(this, arguments);
        $(this).trigger('stylechanged');
        return result;
    }
})();

使用

// Add listener
$('element').on('stylechanged', function () {
    console.log('css changed');
});

// Perform change
$('element').css('background', 'red');

我得到错误,因为var ev =新的$.Event('style');HtmlDiv中没有定义style之类的东西。我删除了它,现在启动$(this).trigger("stylechanged")。另一个问题是Mike没有返回$(css, ..)的结果,那么在某些情况下它会产生问题。我得到结果并返回。现在工作^^在每一个css变化包括从一些库,我不能修改和触发事件。

其他回答

你可以尝试Jquery插件,它触发事件时,css是改变,它很容易使用

http://meetselva.github.io/#gist-section-attrchangeExtension

 $([selector]).attrchange({
  trackValues: true, 
  callback: function (e) {
    //console.log( '<p>Attribute <b>' + e.attributeName +'</b> changed from <b>' + e.oldValue +'</b> to <b>' + e.newValue +'</b></p>');
    //event.attributeName - Attribute Name
    //event.oldValue - Prev Value
    //event.newValue - New Value
  }
});

有趣的问题。问题是height()不接受回调,因此无法触发回调。使用animate()或css()设置高度,然后在回调中触发自定义事件。下面是一个使用animate()的例子,测试和工作(演示),作为概念的证明:

$('#test').bind('style', function() {
    alert($(this).css('height'));
});

$('#test').animate({height: 100},function(){
$(this).trigger('style');
}); 

由于jQuery是开源的,我猜您可以调整css函数,以便在每次调用时调用您所选择的函数(传递jQuery对象)。当然,您需要仔细检查jQuery代码,以确保它在内部没有其他用于设置CSS属性的东西。理想情况下,您应该为jQuery编写一个单独的插件,这样它就不会干扰jQuery库本身,但您必须决定这对您的项目是否可行。

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

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

在jQuery或java脚本中,没有对样式更改事件的内置支持。但是jQuery支持创建自定义事件并监听它,但每次有变化时,你应该有一种方法来触发它。所以这不是一个完整的解决方案。