Javascript jQuery（事件）：监视元素样式

假设有这样的元素

<div class="watch-me" style="display: none;">Watch Me Please</div>

请看着我 正如我们可以看到的，上面的元素样式是

display:none

，我如何制作脚本来观看这个元素。当该元素样式更改为

display:block

时，将触发一些代码

---

非常感谢…

由于9点之前不支持IE，您无法依赖，因此我认为您需要设置一个轮询计时器来观看。例如：

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

当你想开始观看时，只需写下：

startPolling();

您可以使用该功能，但它是非标准的，已经有了跨浏览器的实现

---

据我所知，唯一的方法就是用定时器

我创建了一个小型jQuery插件（是的，就在这里，就在现在），它针对jQuery集执行以下操作：

编辑此插件现在位于GitHub上：

用法：

$('.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');

---

这是高度实验性的（已经警告过你！），可能不适合你的问题或这个问题的答案，但我想到你可以做两件事：

1-覆盖jQuery的核心

.toggle

方法，向应用它的元素添加一些数据

2-从jQuery 1.4.4开始，将

changeData

事件处理程序绑定到元素

这意味着，只要切换元素，就可以使某些事情发生。同样的原则也适用于

.hide

和

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

<!-- exhaustive test markup -->
<div id="test">Hello</div>
<div id="test2" style="display:none">Hello 2</div>

// go!
$(document).ready(function() {
    $("#test").toggle();
    $("#test2").toggle();
});

//1-override.toggle（）
var original=jQuery.fn.toggle；
jQuery.fn.toggle=函数（）{
log（“覆盖方法：toggle（）”）；
//调用原始切换
原始。应用（此，参数）；
//记录元素的可见性
$（this）.data（“可见”，$（this）.is（“：可见”）；
归还这个；
};
//2-将changeData事件处理程序绑定到“监视列表”
$（'div'）.bind（“changeData”，function（）{
警报（“可见性更改为：”+$.data（此为“可见”）；
});
你好
你好2
//走！
$（文档）.ready（函数（）{
$（“#测试”）.toggle（）；
$（“#test2”）.toggle（）；
});

请在此处尝试：
我编写了一个jQuery插件，用于查看DOM元素属性/属性和CSS属性的更改，有些人可能会发现这些更改更直观/更易于使用：

为了完成你所追求的目标，你会做如下事情：

$('.watch-me').watch({
    'display': function( oldVal, newVal, elm ) {
        if (newVal == 'block') {
            // Do something
        }
    }
});

该插件还支持跟踪监视元素上jQuery方法的返回值，因此，例如，当对给定元素调用jQuery方法时，如果返回值发生变化，您可以启动回调。
这可能被认为是没有回答问题，但是使用JQuery自定义事件和.trigger方法比使用间隔和监视（只消耗资源）要好

更重要的是，元素可以订阅来自它们正在“监视”的对象的新触发事件

请看这里：

检查

附言。
不推荐使用watch/unwatch。
不要使用setInterval解决方案
 那么这里的代码是什么
/“this”在这个范围内将引用属性发生变化的对象
我编写了一个相关插件来监视各个样式（如颜色、宽度等）的计算值，而不是整个
样式
属性。也许能帮上忙：你救了我的头发！我怎样才能递一杯啤酒？：）回复@user76061评论。我不知道那是不是讽刺，但该死！那很酷。我只希望有一天我能在这个领域表现得很酷……因为现在，很遗憾我不是。+1但这篇文章是你自己写的吗？：）我想华丽的外表还是有价值的。
$('.watch-me').unwatch('style');

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

<!-- exhaustive test markup -->
<div id="test">Hello</div>
<div id="test2" style="display:none">Hello 2</div>

// go!
$(document).ready(function() {
    $("#test").toggle();
    $("#test2").toggle();
});

$('.watch-me').watch({
    'display': function( oldVal, newVal, elm ) {
        if (newVal == 'block') {
            // Do something
        }
    }
});

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