Javascript 有没有可能听一个；风格改变“；事件

是否可以在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);
    }
})();

这将临时重写internal prototype.css方法，并在最后使用触发器重新定义它。所以它是这样工作的：

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

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

---

有趣的问题。问题是height（）不接受回调，因此无法启动回调。使用animate（）或css（）设置高度，然后在回调中触发自定义事件。下面是一个使用animate（）、tested and works（）作为概念证明的示例：

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

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

---

jQuery或java脚本中没有对样式更改事件的内置支持。但是jQuery支持创建自定义事件并侦听它，但是每次有更改时，您都应该有自己触发它的方法。因此，这不是一个完整的解决方案。

正如其他人所建议的，如果您可以控制更改元素样式的任何代码，则可以在更改元素高度时触发自定义事件：

$('#blah').bind('height-changed',function(){...});
...
$('#blah').css({height:'100px'});
$('#blah').trigger('height-changed');

---

否则，尽管资源非常密集，但您可以设置一个计时器来定期检查元素高度的变化…

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

---

我认为最好的答案是Mike，如果你不能启动你的活动，因为这不是你的代码。但是当我使用它时，我会犯一些错误。所以我写了一个新的答案，告诉你我使用的代码

延伸

用法

---

我得到了错误，因为var ev=new$.Event（'style'）；HtmlDiv中没有定义类似样式的内容。。我删除了它，现在启动$（this.trigger）（“stylechanged”）。另一个问题是Mike没有返回$（css，…）的resulto，因此在某些情况下可能会出现问题。所以我得到结果并返回它。现在^^^在每个css更改中都有效，包括一些我无法修改和触发事件的lib。

只需从上面添加并形式化@David的解决方案：

请注意，jQuery函数是可链接的，并返回“this”，因此可以一个接一个地调用多个调用（例如

$container.css（“溢出”、“隐藏”）.css（“大纲”，0）；

）

因此，改进后的代码应该是：

（函数（）{
var ev=新的$.Event（'style'），
orig=$.fn.css；
$.fn.css=函数（）{
var ret=orig.apply（这是参数）；
$（此）.trigger（ev）；
return ret；//必须包含以下内容
}
})();

我也有同样的问题，所以我写了这个。它相当有效。如果您将它与一些CSS转换混合在一起，看起来很棒

function toggle_visibility(id) {
   var e = document.getElementById("mjwelcome");
   if(e.style.height == '')
      e.style.height = '0px';
   else
      e.style.height = '';
}

---

自从提出这个问题以来，事情有了一些进展——现在可以使用检测元素的“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'] });

传递给回调函数的参数是一个对象，用于获取旧样式值和新样式值

---

支持包括IE11+。

您可以尝试Jquery插件，它在css发生更改时触发事件，并且易于使用

$（[selector]）.attrchange({
trackValues:true，
回调：函数（e）{
//log（“Attribute”+e.attributeName+”从“+e.oldValue+”更改为“+e.newValue+”
”）；
//event.attributeName-属性名称
//event.oldValue-上一个值
//event.newValue-新值
}
});

jQuery cssHooks怎么样

也许我不理解这个问题，但是您可以使用

cssHooks

轻松完成搜索，而无需更改

css（）

函数

文件副本：

(function( $ ) {

// First, check to see if cssHooks are supported
if ( !$.cssHooks ) {
  // If not, output an error message
  throw( new Error( "jQuery 1.4.3 or above is required for this plugin to work" ) );
}

// Wrap in a document ready call, because jQuery writes
// cssHooks at this time and will blow away your functions
// if they exist.
$(function () {
  $.cssHooks[ "someCSSProp" ] = {
    get: function( elem, computed, extra ) {
      // Handle getting the CSS property
    },
    set: function( elem, value ) {
      // Handle setting the CSS value
    }
  };
});

})( jQuery ); 

---

对不起，这证明了什么？您可以手动触发事件。当修改样式属性时，我会认为OP是在某个自动触发事件之后发生的。@JPot他显示高度属性在更改时不会引发事件。是的，这是一个不错的解决方案，但在实际应用程序中，我怀疑这可能会占用大量资源，甚至会使浏览器看起来很慢，无法跟上用户的交互。我很想知道情况是否如此。@pixeline:我看不出它应该慢那么多。jQuery仍然会调用css原型，我只是给它添加了一个触发器。因此，基本上这只是一个额外的方法调用。我理解：在用户与应用程序交互的流程中，css（）似乎被调用了很多时间。这可能会产生问题，具体取决于您对该触发器所做的操作（如果它只是一个控制台日志，我想您当然是安全的）。我只是想知道。这也取决于应用程序。我个人倾向于在我的东西中做大量的视觉反馈。要使它与现有的jquery css调用一起工作，还有两件事要做：1）您可能希望从新的css函数中返回元素，否则它将中断流畅样式的css调用。例如：$（'p'）.css（'display'，'block'）.css（'color'，'black'）；等2）如果是对属性值的调用（例如“obj.css（'height'）；”），您可能希望返回原始函数的返回值-我通过检查函数的参数列表是否只包含一个参数来执行此操作。我做了一个更详细的说明

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

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

(function( $ ) {

// First, check to see if cssHooks are supported
if ( !$.cssHooks ) {
  // If not, output an error message
  throw( new Error( "jQuery 1.4.3 or above is required for this plugin to work" ) );
}

// Wrap in a document ready call, because jQuery writes
// cssHooks at this time and will blow away your functions
// if they exist.
$(function () {
  $.cssHooks[ "someCSSProp" ] = {
    get: function( elem, computed, extra ) {
      // Handle getting the CSS property
    },
    set: function( elem, value ) {
      // Handle setting the CSS value
    }
  };
});

})( jQuery );