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

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

当前回答

事情已经发生了一些变化，现在可以使用MutationObserver来检测元素的'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+。

2013-12-19 13:43:16

其他回答

jQuery csshook怎么样?

也许我不明白这个问题，但你正在搜索的东西很容易用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 );

https://api.jquery.com/jQuery.cssHooks/

2020-03-16 17:16:35

只是从上面添加并形式化了@David的解决方案:

请注意，jQuery函数是可链的，并返回'this'，因此多个调用可以一个接一个地调用(例如$container.css("overflow"， "hidden").css("outline"， 0);)。

所以改进后的代码应该是:

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

2013-06-24 08:41:22

你可以尝试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
  }
});

2016-03-30 07:55:13

我也有同样的问题，所以我写了这个。它运行得相当好。如果你把它和一些CSS过渡混合在一起看起来很棒。

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

2013-10-04 18:51:45

事情已经发生了一些变化，现在可以使用MutationObserver来检测元素的'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+。

2013-12-19 13:43:16

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

推荐文章

最新文章

标签