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

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

当前回答

只是从上面添加并形式化了@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函数，以便在每次调用时调用您所选择的函数(传递jQuery对象)。当然，您需要仔细检查jQuery代码，以确保它在内部没有其他用于设置CSS属性的东西。理想情况下，您应该为jQuery编写一个单独的插件，这样它就不会干扰jQuery库本身，但您必须决定这对您的项目是否可行。

2010-01-28 21:40:22

只是从上面添加并形式化了@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

正如其他人建议的那样，如果你可以控制任何改变元素样式的代码，你可以在改变元素高度时触发一个自定义事件:

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

否则，尽管相当耗费资源，但您可以设置一个计时器来定期检查元素高度的变化……

2010-01-28 21:20:37

我也有同样的问题，所以我写了这个。它运行得相当好。如果你把它和一些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

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

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

2011-11-16 20:58:05

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

推荐文章

最新文章

标签