突变观察者:检测从父元素继承的可见性更改

时间:2018-09-20 14:20:57

标签: javascript html css onchange mutation-observers

我试图检测目标元素何时变得可见(visible或display:block),无论它在HTML中的位置。

我尝试使用MutationObservers,但是,仅当观察到的元素在CSS属性中具有直接变化时,才能检测到可见性变化。因此,它会忽略对其父元素的更改。

var targetNode = document.getElementById('target');
var observer = new MutationObserver(function(){
    alert(targetNode.offsetWidth);
    }
);
observer.observe(targetNode,  { attributes: true, childList: true });

如本jsfiddle所示,当父元素的CSS属性被更改并且附加到子元素/目标元素的MuatationObserver未检测到/观察到该问题时,就会发生问题。除了使用Intervals之外,是否有一种方法可以观察到的DOM元素检测从父级继承的CSS中的更改?

1 个答案:

答案 0 :(得分:0)

您可以观察父母和孩子:

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>