0

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

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

1 回答 1

0

这是一个实际示例，展示了如何使用突变观察者。请注意，我使用了以 WebKit 为前缀的 MutationObserver 实现，但您提到您无论如何都在使用 Chrome，因此您至少可以对此进行测试，并在必要时对其进行调整以适应您的需求。

首先，我们创建MutationObserver并为其提供回调。此回调将使用 2 个参数调用 - 一个MutationRecord实例数组，其次是一个实例MutationObserver（负责调用回调的那个）。这在将单个回调附加到多个 MutationObservers 时很有用。请注意，它接收一个 MutationRecords 数组，而不是为每个 MutationRecord 调用一次。这允许将它们捆绑在一起，这是提高性能所必需的。

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

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

var config = { attributes: true };

请注意，虽然我们在这里将它定义为一个简单的对象，但这实际上将用作MutationObserverInit 对象。

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

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

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

于 2013-01-14T03:05:04.823 回答