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

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

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

来源

2016-08-18 JMZ

似乎有一个'attributeFilter'选项可以传入以查找特定属性。显然，它会触发style属性内部的任何更改，因为该值对于MutationObserver不是特殊的。 –

按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); 
    } 
}

来源

2016-08-18 17:34:24 wOxxOm

对不起offtop。概念反应没有突变。如果你需要听某些元素的变化（例如风格）。您可以使用componentDidUpdate并从@refs.parentDiv（在渲染函数<div id="parentDiv" ref="parentDiv" style="display:none;">之前设置ref）和检查样式之后获取元素，并在新渲染之前设置z-Index值。

来源

2016-08-18 21:25:25

+1好的建议。打破这些反模式并获得反应。那么你可以真正学习一次，并写在任何地方。祝你好运，上帝保佑 –

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

回答

相关问题