javascript – 如何使用变异观察者对特定样式属性的变化作出反应?
作者:互联网
我一直在尝试使用Mutation Observers,到目前为止,我可以应用相关函数来添加,删除元素等.现在我想知道,有没有办法针对特定样式属性中的特定更改?我知道我可以观察属性的变化,但我只是不知道如何观察特定的属性修改.例如,如果#childDiv的z-index值更改为5678,请修改parentDiv的样式以便显示它.
<div id="parentDiv" style="display:none;">
<div id="childDiv" style="z-index:1234;">
MyDiv
</div>
</div>
解决方法:
根据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);
}
}
标签:javascript,css,html,mutation-observers 来源: https://codeday.me/bug/20190611/1219104.html