JS监听DOM宽高的变化

在 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、兼容性不再说了。

JS监听DOM宽高的变化相关推荐

监听元素宽高变化resize
首先我们先了解js中resize功能只支持window对象正常情况下我们队某一元素使用resize功能是无法监听到元素宽高变化的. 1.重构resize() 在已经引入jquery的情况下 js文件 ...
js 监听dom属性的变化，如id，class
tinymce中的颜色选择器,选择后只有下划线变了颜色,UI要求字体也变色.下划线和上面的字母都是svg中的path,没有change之类的事件可以监听. <editor@onInit=&quo ...
js/Jquery通过MutationObserver实现监听dom元素的属性变化用div简单实例
图片实例
js 监听页面url锚点变化 window.onpopstate
window.onpopstate = function (event) {if (location.href.indexOf('#') == -1) {location.reload();}}; 解 ...
Vue + Element UI——监听DOM元素高度和宽度解决方案整理（八种方法）
问题描述监听DOM元素大小的变化,在前端开发中,算是一个比较常见的需求,比如我们要制作可伸缩的图表的时候,可能需要根据DOM大小的变化,进行动态的更新图表. 解决方案方法一: 监听window变化 ...
6- js监听输入框值的即时变化onpropertychange、oninput
js监听输入框值的即时变化onpropertychange.oninput 标题: js监听输入框值的即时变化onpropertychange.oninput事件参考: http://m.jb51. ...
动态监听DOM元素的高度
1.背景考虑这样一种情况,产品同学希望达到以下功能: 在我们的网页中有一个固定区域,这个区域会用于渲染从后端拉取的含有图片等资源的富文本字符串. 他需要在内容不超过一个最大高度的时候完全显示所有内容 ...
java计算器监听放大缩小,js监听页面放大缩小
demo body[zoom='scale']:before{ content: '您的网页处于缩放状态,请按 Ctrl+0 恢复到浏览器默认大小'; z-index: 9999; position: ...
JS实时监听DOM元素变化 - MutationObserver
使用 MutationObserver API实时监听DOM元素变化创建 MutationObserver 实列,接受一个用于监听到DOM元素变化的回调函数 const handleListenCh ...

JS监听DOM宽高的变化

JS监听DOM宽高的变化相关推荐

最新文章

热门文章