Как создать прослушиватель событий, который проверяет стиль элемента div?

Question

У меня этот div объявлен на моей html странице:

<div class="ol-unselectable ol-layers" style="position: absolute; width: 100%; height: 100%; z-index: 0;">
</div>

В какой-то момент стиль в элементе div выше дисплея изменился на none:

<div class="ol-unselectable ol-layers" style="position: absolute; width: 100%; height: 100%; z-index: 0; display: none;">
</div>

Когда нужно добавлен элемент div display: none; Мне нужно запустить эту строку:

alert("not displayed"); 

для этой цели мне нужно создать прослушиватель, который будет запускать предупреждение, когда отображение изменено на none.

Мой вопрос в том, как я могу сделать прослушиватель событий, который прослушивает стиль div, имеет атрибут display: none?

Answer 1

Используйте MutationObserver. Ниже приведены комментарии и базовый код из документов MDN

// Select the node that will be observed for mutations
const targetNode = document.getElementById('test');

// Options for the observer (which mutations to observe)
const config = {attributes: true};

// Callback function to execute when mutations are observed
const callback = function(mutationsList, observer) {
  // Use traditional 'for loops' for IE 11
  for (let mutation of mutationsList) {
    const {type, attributeName } = mutation;
    if (type === 'attributes' && attributeName === 'style' && targetNode.style.display === 'none') {

      console.log('Style is none');
    }
  }
};

// Create an observer instance linked to the callback function
const observer = new MutationObserver(callback);

// Start observing the target node for configured mutations
observer.observe(targetNode, config);

document.querySelector('button').addEventListener('click',(e)=>{
   const {style} = targetNode;
   style.display = style.display === 'none' ?'block':'none'

})

<button>
Toggle content
</button>

<div id="test">Content</div>

Answer 2

Если изменение в CSS выполняется с помощью JavaScript, вы можете использовать MutationObserver для обнаружения изменения. Он будет вызывать данную функцию каждый раз, когда изменения DOM происходят с целевым элементом.

const target = document.querySelector('.ol-unselectable');

const observer = new MutationObserver(function(mutations, observer) {
    for(let {type, target} of mutations) {
        if (type === 'attributes' && target.style.display === 'none')
            alert("not displayed")
    }
})

observer.observe(target, {attributes: true})

target.addEventListener('click', () => target.style.display='none')

.ol-unselectable {
  background: blue;
  cursor: pointer;
}

<div class="wrapper">
  <div class="ol-unselectable ol-layers" style="position: absolute; width: 50%; height: 50%; z-index: 0;">
  </div>
</div>