Наблюдатели мутаций: обнаружение изменений видимости, унаследованных от родительского элемента - PullRequest
Новая
       9

Наблюдатели мутаций: обнаружение изменений видимости, унаследованных от родительского элемента

0 голосов
/ 20 сентября 2018

Я пытаюсь определить, когда целевой элемент становится видимым (видимым или отображаемым: блоком) независимо от того, где он находится в 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, которые наследуются от родителей?

1 Ответ

0 голосов
/ 20 сентября 2018

Вы можете наблюдать за родителем и ребенком: 

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>
...