Javascript DOM обнаруживает изменение стиля элементов (без JQUERY)

Question

Я разрабатываю приложение на javascript, и мне нужно обнаружить любые изменения стиля id = "mydiv" без JQUERY.

document.getElementById("mydiv").addEventListener("WHATISANYCHANGESEVENTNAME", function() {
     alert("change detected");
})

Как я могу это сделать. Спасибо

Answer 1

Вы можете использовать MutationObserver

let observer = new MutationObserver((mutations, observer) => {
    mutations.map( m => console.log(m.target.style.cssText) );
});

observer.observe(mydiv, {attributes: true});


// TEST which change background
function changeBg(e) {  
  e.target.style.background = '#'+(Math.random()*2**24|0).toString(16); // random color
}

.foo { width: 100px; height: 100px; background: yellow }

<div id="mydiv" class="foo" onclick="changeBg(event)">clik on me</div>