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

Question

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

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

Answer 1

根据文档使用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);
    }
}