javascript - 如何通过变异观察者对特定样式属性的变化使用react？

Question

我一直在试验 Mutation Observers，到目前为止，我可以应用相关函数来对添加、删除元素等使用react。现在我想知道，有没有办法针对特定样式属性中的特定更改？我知道我可以观察属性变化，但我只是不知道如何观察特定的属性修改。例如，如果#childDiv 的 z-index 值更改为 5678，请修改 parentDiv 的样式以使其显示。

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

Answer 1

根据 the documentation使用 attributeFilter 数组并列出 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);
    }
}