Javascript 如何使用变异观察者对特定样式属性的更改作出反应？

我一直在试验变异观察者，到目前为止，我可以应用相关的函数在添加、删除元素等时做出反应。现在我想知道，有没有一种方法可以针对特定样式属性中的特定更改？我知道我可以观察属性更改，但我不知道如何观察特定的属性修改。例如，如果#childDiv的z-index值更改为5678，请修改parentDiv的样式以显示它

<div id="parentDiv" style="display:none;">
  <div id="childDiv" style="z-index:1234;">
    MyDiv
  </div>
</div>

MyDiv

根据使用

属性过滤器

数组并列出HTML属性，

'style'

如下：

var observer = new MutationObserver(styleChangedCallback);
observer.observe(document.getElementById('childDiv'), {
    attributes: true,
    attributeFilter: ['style'],
});

var oldIndex = document.getElementById('childDiv').style.zIndex;

function styleChangedCallback(mutations) {
    var newIndex = mutations[0].target.style.zIndex;
    if (newIndex !== oldIndex) {
        console.log('new:', , 'old:', oldIndex);
    }
}

对不起，我不在上面。

---

没有突变。如果你需要听一些元素的变化（例如风格）。您可以使用

componentdiddupdate

并从

@refs.parentDiv

获取元素（在渲染函数

中在此之前设置ref）和在检查样式之后，并在新渲染之前设置z索引值。

似乎有一个

attributeFilter

选项，您可以传入以查找特定属性。显然，它将触发style属性内部的任何更改，因为该值对于MutationObserver来说并不特殊。+1表示良好的建议。打破那些反模式，做出反应。这样你就可以真正学习一次，然后在任何地方写作。祝你好运，上帝保佑，但这仍然会触发任何风格，而不是所需的特定风格@Michael，当然了：只有一个

style

属性，这是DOM规范中的确切术语。CSSOM访问器没有观察者，因此您需要自己执行新旧值的比较。