废话不多说,直接举个栗子吧!!!!!!!!
/* 简单的样式如下 */
<style>
div {
width: 300px;
height: 200px;
background: greenyellow;
}
</style>
<!-- 监测的标签 -->
<div id="rect">
</div>
<!-- js代码 -->
<script>
let dom = document.getElementById('rect');
dom.onclick = () => {
dom.style.width = 400 + 'px';
}
// return new Promise((resolve, rejected) => {
let MutationObserver =
window.MutationObserver ||
window.WebKitMutationObserver ||
window.MozMutationObserver;
let observer = new MutationObserver(mutationList => {
//这里是观察到标签样式改变就会执行的函数
console.log('');
});
observer.observe(dom, {
attributes: true,
attributeFilter: ["style"],
attributeOldValue: true,
childList: true,
subtree: true
});
</script>
observer.observe里的attributeFilter里的style可以设置为其他的值,假设你只想检测标签的高度变化的话,那你就将style改为height即可。
这里有关于MutationObserver的开发文档 https://developer.mozilla.org/zh-CN/docs/Web/API/MutationObserver