四川住房和城乡建设部官方网站,织梦图片网站模板,太原室内设计公司排名,江西省赣州市地图全图要监听 div 宽度的变化#xff0c;可以使用 ResizeObserver 接口。ResizeObserver 允许你观察一个或多个元素的尺寸变化#xff0c;并在发生变化时执行回调函数。这种方法比使用 MutationObserver 更专注于尺寸变化#xff0c;且不受元素属性变化的影响。 使用 ResizeObserv… 要监听 div 宽度的变化可以使用 ResizeObserver 接口。ResizeObserver 允许你观察一个或多个元素的尺寸变化并在发生变化时执行回调函数。这种方法比使用 MutationObserver 更专注于尺寸变化且不受元素属性变化的影响。 使用 ResizeObserver
首先创建一个 ResizeObserver 实例并传入一个回调函数该函数将在元素尺寸变化时被调用。在回调函数中你可以访问每个观察到的元素的新尺寸。
const resizeObserver new ResizeObserver(entries {entries.forEach(entry {const { width, height } entry.contentRect;console.log(Element resized: Width${width}, Height${height});});
});// 假设你想观察的元素是一个具有特定ID的div
const observedElement document.querySelector(#yourDivId);// 开始观察该元素
resizeObserver.observe(observedElement);// 当需要停止观察时可以调用 disconnect 方法
// resizeObserver.disconnect();在 vue3 中的使用
const container ref(null);
let observer;
let resizeTimer;onMounted(() {createObserver();
});onUnmounted(() {if (observer) {observer.disconnect();}
});function createObserver() {observer new ResizeObserver((entries) {clearTimeout(resizeTimer);resizeTimer setTimeout(() {for (const entry of entries) {const { width, height } entry.contentRect;console.log(width);}}, 200);});observer.observe(container.value);
}div refcontainer/div注意事项
ResizeObserver 是现代浏览器支持的 API不是所有浏览器都支持。请确保你的目标浏览器支持此 API或者使用 polyfill 来提供跨浏览器兼容性。ResizeObserver 只能观察到元素的尺寸变化不能检测到元素的内容变化或内部布局变化。如果你需要在元素的内容或布局变化时也触发事件可能需要结合使用其他技术如 MutationObserver。
