javascript - jQuery(事件): watch element style

Question

假设有这样的元素

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

我们可以看到上面样式的元素是display: none，我如何制作脚本来观察这个元素。当该元素样式更改为 display: block 时，将触发一些代码。

非常感谢...

Answer 1

据我所知，唯一的方法就是使用计时器。

我创建了一个小的 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');