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

最新推荐文章于 2024-03-13 11:26:26 发布

Yad1219

最新推荐文章于 2024-03-13 11:26:26 发布

阅读量317

点赞数

分类专栏： JavaScript 动态监视元素属性变化文章标签： javascript jquery js

本文链接：https://blog.csdn.net/yad_ya/article/details/118754388

版权

JavaScript 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

动态监视元素属性变化

1 篇文章 0 订阅

订阅专栏

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

最近有点反应不过来了，遮罩层不会写了，但是想到了动态监视元素的某个属性的变化来回去到值，找掉了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>

Yad1219

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
MutationObserver动态监视一个元素的变化

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

扫一扫

专栏目录