使用 js 的 MutationObserver 类，能监视对 DOM 树所做更改。
例如，监听元素属性变化：
<div id="div1">111111111</div>
<button onclick="handleClick()">OK</button>
<script type="text/javascript" charset="utf-8">
const div1 = document.querySelector('#div1');
const observe = new MutationObserver((mutations) => {
console.log('hhhh', mutations)
}).observe(div1, {
attributes: true
})
function handleClick() {
div1.setAttribute('style', 'color: red')
div1.setAttribute('data-name', 'abc')
}
</script>例如，监听元素样式变化：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<style>
#box2,#box1,#box3{
width:100px;
height: 100px;
background: yellow;
margin-left: 50px;
margin-top:10px;
}
</style>
<div>
<div id="box1">
</div>
<div id="box2">
</div>
<div id="box3">
<button id="btn">
点击改变宽高
</button>
</div>
</div>
<script>
var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
var box1=document.getElementById("box1"); //对象{}
var box2=document.getElementById("box2"); //对象{}
var btn=document.getElementById("btn");
let width=100;
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (mutation.type == "attributes") {
console.log("attributes changed", mutation);
box2.style.width=mutation.target.style.width
}
});
});
observer.observe(box1, {
attributes: true, //configure it to listen to attribute changes,
attributeFilter: ['style']
});
btn.onclick=function(){
width+=10;
box1.style.width = width+"px";
};
</script>
</body>
</html>
本篇完，还有疑问？留下评论吧