Question

我正在尝试检测元素显示属性何时更改。最初该元素没有显示属性。我想在元素发生变化时发出警报。我已经尝试了以下代码，但没有任何警报。

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

Answer 1

这是一个展示如何使用mutation observers的实际示例。请注意，我使用了WebKit前缀MutationObserver实现，但是你提到你仍然使用Chrome，所以你至少可以测试它，并在必要时根据你的需要进行调整。

首先我们创建MutationObserver并为其提供回调。将使用2个参数调用此回调 - 一个MutationRecord个实例的数组，其次是MutationObserver的实例（负责调用回调的实例）。将单个回调附加到多个MutationObservers时，这非常有用。请注意，它接收一个MutationRecords数组，而不是为每个MutationRecord调用一次。这样就可以捆绑它们，这对提高性能是必要的。

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

现在我们创建（一个可选的）配置对象，以指定我们感兴趣的突变类型。在这种情况下，属性的突变。

var config = { attributes: true };

请注意，尽管我们在此将其定义为一个简单对象，但实际上它将用作MutationObserverInit object。

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

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

如果您有兴趣，我会将您的示例改编为jsFiddle demo。

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

1 个答案: