js 监听dom元素宽度变化
时间: 2024-10-10 19:15:12 浏览: 31
在JavaScript中监听DOM元素宽度的变化,通常使用`MutationObserver` API。这个API允许开发者观察DOM节点结构或其内容的变化,并在发生变化时执行回调函数。以下是使用`MutationObserver`监听元素宽度变化的一个简单示例:
```javascript
// 要监视的元素
const element = document.getElementById('your-element-id');
// 观察器配置,这里关注的是 'attributes' 类型的改变,包括width属性
const config = { attributes: true, attributeFilter: ['style', 'width'] };
// 回调函数,当宽度发生变化时会被调用
const callback = function(mutationsList, observer) {
for(let mutation of mutationsList) {
if (mutation.type === 'attributes' && mutation.attributeName === 'width') {
console.log(`Element width changed to ${element.style.width}`);
}
}
};
// 创建一个观察者实例
const observer = new MutationObserver(callback);
// 开始观察元素
observer.observe(element, config);
// 当不再需要观察时,可以调用下面这行代码停止观察
// observer.disconnect();
```
阅读全文