我试图检测目标元素何时变为可见(可见或显示: block ),而不管它在 HTML 中的位置。
我尝试使用 MutationObservers,但是,只有当观察到的元素在 CSS 属性中有直接变化时,才能检测到可见性变化。因此,它会忽略对其父元素的更改。
var targetNode = document.getElementById('target');
var observer = new MutationObserver(function(){
alert(targetNode.offsetWidth);
}
);
observer.observe(targetNode, { attributes: true, childList: true });
问题发生在父元素的 CSS 属性被更改并且附加到子/目标元素的 MuatationObserver 未检测/观察到时,如本 jsfiddle 中所示.有没有办法(除了使用间隔)让观察到的 DOM 元素检测从父元素继承的 CSS 变化?
最佳答案
可以观察父子:
observer.observe(targetNode, options);
observer.observe(parentNode, options);
var targetNode = document.getElementById('target');
var parentNode = document.getElementById('parent');
var observer = new MutationObserver(function (changes) { // or replace changes by just: [ { target } ]
const target = changes[0].target
if (target === parentNode)
alert('parent')
if (target === targetNode)
alert('target')
console.log(target)
});
var options = {
attributes: true,
childList: true,
attributeFilter: ['style', 'class']
}
observer.observe(targetNode, options);
observer.observe(parentNode, options);
<script>
function showParent() {
document.getElementById("parent").style.display = "block";
}
function showChild() {
document.getElementById("target").style.display = "block";
}
</script>
<button onclick="showParent()">showParent</button>
<button onclick="showChild()">showChild</button>
<div id="parent" style="display:none;">
parent
<div id="target" style="display:none;">target</div>
</div>
关于javascript - 突变观察者 : detecting visibility changes inherited from a parent element,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52427337/