Javascript监控元素样式变化
方法是使用MutationObserver观察者，可以监控元素的样式变化，并执行回调。
示例代码如下，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="myElement">
Hello!
</div>
<input type="button" value="变化样式!" onclick="changeStyle()">
<script>
// 选择要观察的目标节点
const targetNode = document.getElementById('myElement');
// 创建一个回调函数，当观察到变化时会调用
const callback = (mutationsList, observer) => {
for (let mutation of mutationsList) {
if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
targetNode.innerHTML+="元素样式发生变化:", targetNode.style.color
}
}
};
//typescript的写法：
//const callback: MutationCallback = (mutationsList: MutationRecord[], observer: MutationObserver) =>{}
// 创建一个观察者实例并传入回调函数
const observer = new MutationObserver(callback);
// 配置观察选项
const config = {
attributes: true // 观察属性变化
};
// 开始观察目标节点
observer.observe(targetNode, config);
function changeStyle() {
targetNode.style.color = 'red'; // 这将触发上面的回调
}
</script>
</body>
</html>
原文地址：https://blog.csdn.net/y523648/article/details/143596621
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！