检测属性显示从无显示到显示块

detect property display from no display to display block

本文关键字：显示 属性 检测      更新时间：2023-09-26

我试图检测元素显示属性何时发生变化。最初，元素没有显示属性。我想在元素发生变化时发出警报。我已经尝试了下面的代码，但没有警报。

document.getElementById('xxx').addEventListener('DOMAttrModified', function(e){
  if (e.attrName === 'style') {
    if (e.newValue === 'block') {
      alert('test!');
    }
  }
}, false);
setTimeout(function () {
  var xxx = document.getElementById('xxx');
  xxx.style.display = 'block';
  console.log(xxx);
}, 5000);

下面是一个演示如何使用突变观察器的实际示例。请注意，我使用了WebKit前缀MutationObserver实现，但你提到你正在使用Chrome，所以你至少可以测试这个，如果必要的话，根据你的需求进行调整。

首先，我们创建MutationObserver并为其提供回调。这个回调将被调用2个参数- MutationRecord实例的数组，其次是MutationObserver的实例(负责被调用的回调)。这在将单个回调附加到多个mutationobserver时非常有用。注意，它接收一个MutationRecords数组，而不是为每个MutationRecord调用一次。这允许将它们捆绑在一起，这对于提高性能是必要的。

var observer = new WebKitMutationObserver(function(mutations) {
  console.log(mutations);
});

现在我们创建(一个可选的)配置对象，以指定我们感兴趣的突变类型。在本例中，是一个属性的突变。

var config = { attributes: true };

注意，尽管我们在这里将它定义为一个简单对象，但它实际上将被用作MutationObserverInit对象。

现在，最后，我们告诉观察者观察一个节点:

observer.observe(document.getElementById('xxx'), config);

如果您感兴趣，我将您的示例改编为jsFiddle演示。

相关文章：