js如何检测标签样式的变化

废话不多说，直接举个栗子吧！！！！！！！！

/* 简单的样式如下 */
<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