js中对某个dom的大小进行监听
时间: 2023-09-07 16:02:11 浏览: 161
在JavaScript中,可以使用`ResizeObserver`对象来监听DOM元素的大小变化。
`ResizeObserver`是一个基于观察者模式的API,可以用来观察DOM元素的大小变化,并在元素大小发生变化时触发回调函数。
要使用`ResizeObserver`,首先需要创建一个`ResizeObserver`对象,并将需要监听的DOM元素传递给它的`observe()`方法:
```javascript
const observer = new ResizeObserver(entries => {
for (let entry of entries) {
const { target, contentRect } = entry;
console.log(target, contentRect);
// 在这里可以根据需要执行相应的操作
}
});
const element = document.getElementById('myElement');
observer.observe(element);
```
在以上示例中,`entries`参数是一个包含了所有触发了大小变化的DOM元素的数组。可以通过对每个元素进行迭代,获取元素和其最新大小信息的内容矩形对象`contentRect`,其中包括了元素的宽度、高度、顶部和左侧偏移等信息。可以根据这些信息来执行相应的操作。
需要注意的是,`ResizeObserver`是一个相对新的API,目前只有现代浏览器支持,不适用于较旧的浏览器版本。在使用时需要检查浏览器兼容性并提供备选方案来处理不支持的情况。
阅读全文