Javascript DOM检测元素样式更改（不使用JQUERY）

Question

我正在开发一个javascript应用程序，我需要在没有JQUERY的情况下检测id =“mydiv”的任何样式更改。

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>