Question

我有以下div：

<div id="new-address-modal" style="display:none;"> </div>

使用在属性更改时触发的MutationObserver（因此，只要样式属性更改，我就需要触发它

var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutationRecord) {
    console.log('style changed!');
  });    
});

var target = document.getElementById('new-address-modal');
observer.observe(target, { attributes : true, attributeFilter : ['style'] });

但这仅被触发一次。为了在每次触发样式更改后触发一次触发，我应该怎么做？

谢谢！

Answer 1

您所拥有的有效，您只是在不更改属性的样式，因此永远不会触发它。

在此示例中，我要做的就是每秒更改背景颜色。变异观察者不会在元素的初始创建时触发，因此，如果这是您所期望的，则需要创建一个函数并在加载元素时触发它。

如果将值从一件事修改为同一件事，这也将永远不会触发该事件。

例如：

<!-- HTML -->
<div style="background: red"></div>

// JavaScript
target.style.background = 'red'

您可以看到它是红色的，我们正在尝试将其设置为红色。不会触发突变，因为没有任何变化。

var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutationRecord) {
    console.log('style changed!');
  });
});

var target = document.getElementById('new-address-modal');
observer.observe(target, {
  attributes: true,
  attributeFilter: ['style']
});

// My only edits:
setInterval(function(){
  target.style.display = Math.floor(Math.random() * 2) == 0 ? 'none' : 'initial'
}, 1000)

<div id="new-address-modal" style="display:none;">Now you see me</div>

在示例中，您可以看到，当值保持不变时，永远不会触发。

MutationObserver仅监视一次样式更改

1 个答案: