使用Jquery更改css属性时的事件检测

Question

有没有办法检测元素的"display"css属性是否被更改(无论是否为block或block或inline-block ......)？如果没有,任何插件？谢谢

Answer 1

注意

自撰写本文以来,变异事件已被弃用,并且可能并非所有浏览器都支持.相反,使用变异观察者.

是的你可以.DOM L2 Events模块定义了突变事件 ; 其中之一 - DOMAttrModified是您需要的.当然,这些并没有得到广泛实施,但至少在Gecko和Opera浏览器中得到了支持.

尝试这些方面:

document.documentElement.addEventListener('DOMAttrModified', function(e){
  if (e.attrName === 'style') {
    console.log('prevValue: ' + e.prevValue, 'newValue: ' + e.newValue);
  }
}, false);

document.documentElement.style.display = 'block';

您也可以尝试利用IE的"propertychange"事件作为替代DOMAttrModified.它应该允许style可靠地检测变化.

Answer 2

你可以使用attrchange jQuery插件.插件的主要功能是在HTML元素的属性更改上绑定侦听器函数.

代码示例:

$("#myDiv").attrchange({
    trackValues: true, // set to true so that the event object is updated with old & new values
    callback: function(evnt) {
        if(evnt.attributeName == "display") { // which attribute you want to watch for changes
            if(evnt.newValue.search(/inline/i) == -1) {

                // your code to execute goes here...
            }
        }
    }
});