JS监听DOM宽高的变化

最新推荐文章于 2024-04-11 10:52:18 发布

Marchanges

最新推荐文章于 2024-04-11 10:52:18 发布

阅读量5.1k

点赞数 3

分类专栏： javascript 文章标签： js dom

本文链接：https://blog.csdn.net/u014452812/article/details/106137831

版权

javascript 专栏收录该内容

20 篇文章

订阅专栏

在 JS里面 resize 方法可以监听 window 窗口的大小变化，如果要监听某个Dom的变化话需要用到 MutationObserver 来去监听了，示例代码如下。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style>

		#pp {
			width: 200px;
			height: 200px;
			background-color: pink;
		}
	</style>
</head>
<body>
	<p id="pp"></p>

	<button id="btn">btn</button>

	<script>

		var oP = document.getElementById('pp');

		let MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
		let observer = new MutationObserver(function (mutations) {
			console.log("asdf", mutations);
		});

		observer.observe(oP, {
			attributes: true,
			attributeFilter:['style'],
			attributeOldValue:true
		});

		document.getElementById('btn').onclick = function () {
			oP.style.width = '300px';
		}
	</script>


</body>
</html>

具体的使用、API、兼容性不再说了。