方法是使用MutationObserver观察者,可以监控元素的样式变化,并执行回调。
示例代码如下,
html
<!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>