是否有可能听“风格改变”事件？
是否有可能在jQuery中创build一个可以绑定到任何样式更改的事件监听器？ 例如，如果我想在某个元素更改尺寸时执行某些操作，或者可以执行style属性中的其他更改，请执行以下操作：
$('div').bind('style', function() { console.log($(this).css('height')); }); $('div').height(100); // yields '100' 这将是非常有用的。
有任何想法吗？
UPDATE
对不起，我自己回答，但我写了一个可能适合其他人的整洁的解决scheme：
(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');
由于jQuery是开源的，我猜测你可以调整css函数来调用每次调用的函数（传递jQuery对象）。 当然，你会想要冲刷jQuery代码来确保没有别的东西在内部使用来设置CSS属性。 理想情况下，你会想为jQuery编写一个单独的插件，这样它就不会干扰jQuery库本身，但是你必须决定这对你的项目是否可行。
事情已经发生了一些问题，因为问题被问到 – 现在可以使用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'] });
传递给callback函数的参数是一个MutationRecord对象，它可以让你获得旧的和新的样式值。
支持IE 11+等现代浏览器。
你的事件对象的声明必须在你的新的CSS函数。 否则事件只能被触发一次。
(function() { orig = $.fn.css; $.fn.css = function() { var ev = new $.Event('style'); orig.apply(this, arguments); $(this).trigger(ev); } })();
如果从Mike不能启动你的事件的话，我认为是最好的答案，因为这不是你的代码。 但是当我使用它时，我会遇到一些错误。 所以我写了一个新的答案给你看我使用的代码。
延期
// Extends functionality of ".css()" // This could be renamed if you'd like (ie "$.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 = new $ .Event（'style'）; 像样式的东西没有在HtmlDiv中定义..我删除它，我现在启动$（this）.trigger（“stylechanged”）。 另外一个问题是，Mike没有返回$（css，..）的结果，那么在某些情况下会出现问题。 所以我得到结果并返回它。 现在的作品^^在每个CSS变化包括从一些库我不能修改和触发事件。
正如其他人所build议的那样，如果您可以控制改变元素样式的任何代码，则可以在更改元素的高度时触发自定义事件：
$('#blah').bind('height-changed',function(){...}); ... $('#blah').css({height:'100px'}); $('#blah').trigger('height-changed');
否则，虽然资源密集，但可以设置一个定时器来定期检查元素高度的变化。
对于jQuery或java脚本中的样式更改事件没有内置的支持。 但jQuery支持创build自定义事件并收听，但每次有变化时，您都应该有办法自己触发它。 所以它不会是一个完整的解决scheme。
有趣的问题。 问题是，高度（）不接受callback，所以你将无法启动callback。 使用animate（）或css（）来设置高度，然后在callback中触发自定义事件。 下面是一个使用animate（），testing和工作（ 演示 ）的例子，作为概念certificate：
$('#test').bind('style', function() { alert($(this).css('height')); }); $('#test').animate({height: 100},function(){ $(this).trigger('style'); });
只需从上面添加和forms化@David的解决scheme：
请注意，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 } })();
我有同样的问题，所以我写了这个。 它工作得很好。 看起来不错，如果你把它与一些CSS转换混合。
function toggle_visibility(id) { var e = document.getElementById("mjwelcome"); if(e.style.height == '') e.style.height = '0px'; else e.style.height = ''; }
你可以尝试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 } });
您也可以使用Chrome中断点（我使用的版本是60.0.3112.113（官方版本）（64位）） – 请参阅此屏幕快照： Chrome Breakpoint
