Question

有没有办法检测元素的“display”css属性是否被更改（无论是否为block或block或inline-block ......）？如果没有，任何插件？感谢

Answer 1

注意
自撰写本文以来，
Mutation events已被弃用，并且所有浏览器可能都不支持。相反，请使用mutation observer。

是的，你可以。 DOM L2 Events模块定义mutation 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's "propertychange" event代替DOMAttrModified。它应该允许可靠地检测style更改。

Answer 2

您可以使用attrchange jQuery plugin。插件的主要功能是在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...
            }
        }
    }
});

Answer 3

您可以使用jQuery的css函数来测试CSS属性，例如。 if ($('node').css('display') == 'block')。

Colin是对的，没有明确的事件在特定的CSS属性发生变化时被触发。但是你可以翻转它，并触发设置显示的事件，以及其他任何事件。

还可以考虑使用添加CSS类来获取所需的行为。通常，您可以向包含元素添加类，并使用CSS来影响所有元素。我经常将一个类打到body元素上，以指示AJAX响应处于挂起状态。然后我可以使用CSS选择器来获得我想要的显示。

不确定这是否是您正在寻找的。

Answer 4

对于css转换将影响的属性，可以使用transitionend事件，例如z-index：

＆＃13;

$(".observed-element").on("webkitTransitionEnd transitionend", function(e) {
  console.log("end", e);
  alert("z-index changed");
});

$(".changeButton").on("click", function() {
  console.log("click");
  document.querySelector(".observed-element").style.zIndex = (Math.random() * 1000) | 0;
});

＆＃13;

.observed-element {
  transition: z-index 1ms;
  -webkit-transition: z-index 1ms;
}
div {
  width: 100px;
  height: 100px;
  border: 1px solid;
  position: absolute;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="changeButton">change z-index</button>
<div class="observed-element"></div>

＆＃13;

Answer 5

你做不到。 CSS不支持“事件”。敢问我需要什么？在SO上查看此post。我想不出你为什么要把事件挂钩到样式改变的原因。我在这里假设样式更改是通过一段javascript在其他地方触发的。为什么不在那里添加额外的逻辑？

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

5 个答案:

注意