事件检测何时使用Jquery更改CSS属性

有没有一种方法可以检测元素的“ display” css属性是否已更改（更改为none还是block或inline-block ...）？如果没有，有插件吗？谢谢

注意

自撰写此文章以来，不推荐使用突变事件，并且并非所有浏览器都支持突变事件。而是使用一个突变观察器。

是的你可以。DOM L2事件模块定义了突变事件；其中之一-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可靠地检测更改。

您可以使用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...
            }
        }
    }
});

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

Colin是正确的，当更改特定CSS属性时，不会触发任何显式事件。但是您可能可以翻转它，并触发设置显示的事件以及其他任何事件。

还可以考虑使用添加CSS类来获得所需的行为。通常，您可以将类添加到包含元素，然后使用CSS来影响所有元素。我经常在body元素上添加一个类，以指示AJAX响应正在处理中。然后，我可以使用CSS选择器来获得所需的显示。

不知道这是您要找的东西。

对于CSS过渡将影响的属性，可以使用transitionend事件，例如z-index：

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

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

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

你不能 CSS不支持“事件”。敢问你需要什么？在SO上查看此帖子。我想不出您为什么要将事件挂接到样式更改的原因。我在这里假设样式更改是由其他javascript触发的。为什么不在那里添加额外的逻辑呢？