在没有 setInterval 的情况下检测 class 变化

Question

我有一个 div，它以编程方式添加了额外的 classes。如何在不使用此 setInterval 实现的情况下检测 class 名称更改？

setInterval(function() {
    var elem = document.getElementsByClassName('original')[0];
    if (elem.classList.contains("added")) { detected(); }
}, 5500);

MutationObserver?

Answer 1

你现在可以使用 mutation observer. It's quite widely supported。

var e = document.getElementById('test')
var observer = new MutationObserver(function (event) {
  console.log(event)   
})

observer.observe(e, {
  attributes: true, 
  attributeFilter: ['class'],
  childList: false, 
  characterData: false
})

setTimeout(function () {
  e.className = 'hello'
}, 1000)

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

在没有 setInterval 的情况下检测 class 变化

Detecting class change without setInterval

html

javascript

setinterval

mutation-observers