2017-02-08 9 views
5

Mam div, który ma dodatkowe klasy dodane do niego programowo. Jak mogę wykryć zmianę nazwy klasy bez zastosowania tej implementacji setInterval?Wykrywanie zmiany klasy bez setInterval

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

MutationObserver?

+1

Czy ogień zdarzenie, kiedy zmienić klasę? A może chcesz wykryć zmianę klasy na kliencie, który nie robi zmian? to znaczy. dokument się zmienił? Możesz to zrobić za pomocą aktualizacji push. –

+3

Oto, do czego służy MutationObserver z opcją attributeFilter: [Jak zareagować na zmianę określonego atrybutu stylu za pomocą obserwatorów mutacji?] (// stackoverflow.com/a/39024295) - zastąp "styl" przez "class". – wOxxOm

+0

Nie robię zmian ... Mój kod jest wstrzykiwany za pomocą rozszerzenia chrome – David

Odpowiedz

6

Możesz użyć numeru mutation observer. W dzisiejszych czasach jest dość 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>

Powiązane problemy