MutationObserver动态监视一个元素的变化

也并不能完全说是动态,他需要你在停止事件操作之后才会进行获取值,反正还挺好用的

最近有点反应不过来了,遮罩层不会写了,但是想到了动态监视元素的某个属性的变化来回去到值,找掉了Mutation Observer API 这个东西,是原生的API,具体详细的可以看这里,有详细的解读,我这用了jQuery,不喜欢的可以自己改一下,原文大佬文章在这
百度到都是window.onresize,没找到对单个元素的监听,下面是大牛推荐的方法: MutationObserver

<!DOCTYPE html>
<html lang="">
<head>
	<meta charset="utf-8"/>
	<title></title>
	<script type="application/javascript" src="../js/jquery.min.js"></script>
	<script type="application/javascript">
		$(function () {
			let initHeight = document.body.clientHeight;
			const MutationObserver = window.MutationObserver
			// 选择目标节点
			let target = document.body;
			// 创建观察者对象
			const observer = new MutationObserver(function (mutations) {
				if (initHeight !== document.body.clientHeight) {
					initHeight = document.body.clientHeight;
					console.log(initHeight);
				}
			});
			// 配置观察选项:
			const config = {
				attributes: true
			};
			// 传入目标节点和观察选项
			observer.observe(target, config);
			// 随后,你还可以停止观察
			//observer.disconnect();
		});

		function reHeigth() {
			// // var height = $('body').style.height
			// console.log($('body').css('height'))
			$('div').css('height', $('body').css('height'));
		}
	</script>
</head>

<body>
<!--<input type="text"/>-->
<div style="background: rgba(0,0,0,.4); width: 100%; position: fixed"></div>
<button onclick="reHeigth();">修改body高度</button>
</body>

</html>

版权声明:本文为Yad_ya原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。