JavaScript如何监控一个容器width变化
时间: 2024-04-30 15:17:48 浏览: 14
可以使用JavaScript中的ResizeObserver API来监控一个容器的width变化。ResizeObserver API是一个新的浏览器API,可以用来监控元素的大小变化。
以下是一个例子,演示如何使用ResizeObserver API来监控一个容器的width变化:
```javascript
// 监控的目标元素
const container = document.querySelector('.container');
// 创建一个 ResizeObserver 实例
const resizeObserver = new ResizeObserver(entries => {
// 遍历 ResizeObserverEntry 数组
for (let entry of entries) {
// 获取目标元素的新大小
const newWidth = entry.contentRect.width;
console.log('容器的宽度变为:', newWidth);
}
});
// 监控目标元素的大小变化
resizeObserver.observe(container);
```
在上面的代码中,我们首先获取了要监控的目标元素,并创建了一个ResizeObserver实例。然后,我们调用ResizeObserver实例的observe()方法来开始监控目标元素的大小变化。当元素大小发生变化时,ResizeObserver会触发回调函数,回调函数中的entries参数是一个ResizeObserverEntry对象数组,我们可以通过遍历这个数组来获取目标元素的新大小。在本例中,我们只关心元素的宽度变化,因此我们只获取了contentRect属性中的width值。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)