JavaScript DOM检测元素样式更改(无jQuery)

Question

i开发一个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>