javascript 如何监听一个元素的显示或隐藏？

Question

用javascript或者用jquery如何监听一个元素的显示或隐藏，
例如一个div的display:none 和 display:block 之间的切换。

Answer 1

可以考虑监听它的 computered style，即已经被浏览器计算出来的样式，比如考虑它的宽高度、或者 display 是否为 none，以及 visibility 等

Answer 2

不考虑IE的话，可以用用https://developer.mozilla.org/en/docs/Web/API/MutationObserver

Answer 3

jQuery里有is（）可以判断

$('#id').is(":hidden")
$('#id').is(":visible")

Answer 4

2种方式，如果是完全不受你控制的元素， 使用 $(dom).css('display')。 返回一个字符串，block或者none来判断。

如果是你自己控制显示隐藏的，就可以专门写一个class 例如：hide. $(dom).hasClass('hide') 来判断。

Answer 5

js和jquery应该都是没有这样的事件，上面有人给出h5的方案，另外可以考虑使用其他能监听这个事件的框架，或者完全使用jquery的show和hide来控制显示隐藏的话，也可以自己重构这2个方法，使它们注册一个自定义的事件，然后再监听这个自定义的事件

Answer 6

不要求严格的话可以用轮询去查看。上面的方法其实我最推荐注册自定义事件。

Answer 7

监听的话-自己写个轮询方法

var notificationFun=function(hiddenFlag){
    console.log("~~XX元素~~~"+hiddenFlag)
};
setInterval(function(){
    var displayCSS=$('#domeId').css("display");
    if(displayCSS==='display'){
        notificationFun(true);
    }
},100);