jQuery（event）：监视元素样式
让我们说有这样的元素
Watch Me Please 我们可以看到上面的元素是display: none ，我怎样才能让脚本看到这个元素。 当该元素样式更改为display: block然后会有一些代码将被触发。
非常感谢…
据我所知，唯一的方法是使用计时器。
我创建了一个小jQuery插件（是的，就在这里，现在），它针对jQuery集执行此操作：
编辑此插件现在在GitHub上： https ： //github.com/jacobrelkin/jquery-watcher
$.fn.watch = function(property, callback) { return $(this).each(function() { var self = this; var old_property_val = this[property]; var timer; function watch() { if($(self).data(property + '-watch-abort') == true) { timer = clearInterval(timer); $(self).data(property + '-watch-abort', null); return; } if(self[property] != old_property_val) { old_property_val = self[property]; callback.call(self); } } timer = setInterval(watch, 700); }); }; $.fn.unwatch = function(property) { return $(this).each(function() { $(this).data(property + '-watch-abort', true); }); };
用法：
$('.watch-me').watch('style', function() { //"this" in this scope will reference the object on which the property changed if($(this).css('display') == 'block') { //do something... } });
要清除此属性观察者：
$('.watch-me').unwatch('style');
你可以使用object.watch函数，但它的非标准，已经有一个跨所有浏览器的跨浏览器实现Object.watch（）？
$('.watch-me').get(0).watch('style', handlerFunction);
function startPolling() { var handle = window.setInterval(function(){ var element = $(".watch-me"); if (element.css("display") == "block") { // trigger the event window.clearInterval(handle); } }, 100); }
当你想开始观看时，只需写下：
startPolling();
我写了一个jQuery插件，用于观察DOM元素属性/属性和CSS属性的更改，有些人可能会发现更直观/更容易使用： jQuery.watch
为了完成你所追求的目标，你会做这样的事情：
$('.watch-me').watch({ 'display': function( oldVal, newVal, elm ) { if (newVal == 'block') { // Do something } } });
该插件还支持在监视元素上跟踪jQuery方法的返回值，因此，当在给定元素上调用jQuery方法的返回值时，您可以触发回调。
由于在9之前不支持IE，你不能依赖DOM Mutation事件 ，我认为你需要设置一个轮询计时器来观看。 例如：
var watched = $('.watch-me'); var lastDisplay = watched.css('display'); // Peek at the property about twice per second setInterval(function(){ var curDisplay = watched.css('display'); if (curDisplay!=lastDisplay){ // Do what you want here. lastDisplay = curDisplay; } },500);
如果您想在更改一次后取消观看：
var watched = $('.watch-me'); var lastDisplay = watched.css('display'); var timer = setInterval(function(){ if (watched.css('display')!=lastDisplay){ // Do what you want here. clearInterval( timer ); } },500);
这是非常实验性的（你已被警告！）并且可能不适合你的问题或回答这个问题，但我发现你可以做两件事：
1 – 覆盖jQuery的核心.toggle方法，将一些数据添加到它应用的元素中。
2 – 从jQuery 1.4.4开始，将changeData事件处理程序绑定到元素
这意味着，只要元素被切换，你就可以发生一些事情。 同样的原则可以适用于.show和.show方法，或任何其他方法。
// 1 - override .toggle() var original = jQuery.fn.toggle; jQuery.fn.toggle = function() { console.log("Override method: toggle()"); // call the original toggle original.apply(this, arguments); // record the element's visibility $(this).data("visible", $(this).is(":visible")); return this; }; // 2 - bind a changeData event handler to a 'watch list' $('div').bind("changeData", function() { alert("Visibility changed to: " + $.data(this, 'visible')); }); Hello // go! $(document).ready(function() { $("#test").toggle(); $("#test2").toggle(); });
在这里尝试： http ： //jsfiddle.net/karim79/nreqv/1/
这可能被认为没有回答这个问题，但最好使用JQuery自定义事件和.trigger方法，而不是使用间隔和观察（这只是消耗资源）。
更重要的是，元素可以从他们“观察”的对象订阅新的触发事件。
看看这里：
检查https://developer.mozilla.org/en/docs/Web/API/MutationObserver
var target = _DOM_; var lastDisplayStyle = _DOM_.style.display; var observer = new MutationObserver(function (mutations) { mutations.forEach(function (mutation) { if (mutation.type === "attributes") { if (lastDisplayStyle !== _DOM_.style.display){ // your code there } } }); }); var config = { attributes: true }; observer.observe(target, config);
PS watch / unwatch已被弃用。 https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/watch不要使用setInterval解决方案！