首页 > 文章 > 前端

JSResizeObserver监听元素变化教程

时间：2025-11-30 13:54:34 364浏览收藏

本篇文章主要是结合我之前面试的各种经历和实战开发中遇到的问题解决经验整理的，希望这篇《JS Resize Observer 监听元素变化方法》对你有很大帮助！欢迎收藏，分享给更多的需要的朋友学习~

ResizeObserver可高效监听DOM元素尺寸变化，通过observe()监听目标元素，contentRect获取内容区域尺寸，borderBoxSize获取含边框尺寸，支持unobserve()和disconnect()清理资源，适用于响应式组件等场景。

如何利用 JavaScript 的 Resize Observer 监听元素尺寸的变化？

当需要实时感知 DOM 元素尺寸变化时，ResizeObserver 是比事件监听或轮询更高效、更现代的解决方案。它能监听元素内容区域或边框盒的变化，且不会触发重排或重绘，性能优秀。

基本用法：创建并观察目标元素

使用 ResizeObserver 构造函数创建实例，调用 observe() 方法指定要监听的元素。

获取不同尺寸信息：contentRect vs borderBoxSize

entry.contentRect 提供的是 CSS 内容区域的尺寸（不包括边框和外边距），适合大多数场景。如果需要包含边框的尺寸，可以使用 borderBoxSize。

const observer = new ResizeObserver(entries => {
  entries.forEach(entry => {
    // 使用 borderBoxSize 获取包含边框的尺寸
    const boxSize = entry.borderBoxSize[0];
    console.log('包含边框的宽度:', boxSize.inlineSize);
    console.log('包含边框的高度:', boxSize.blockSize);
  });
});

停止监听与清理资源

为了避免内存泄漏，不再需要监听时应调用 unobserve() 或 disconnect() 方法。

// 停止单个元素的监听
observer.unobserve(targetElement);

// 完全断开所有监听
observer.disconnect();

基本上就这些。ResizeObserver 特别适合用于响应式组件、图表容器、动态布局调整等场景，无需依赖窗口 resize 事件或定时检查尺寸。兼容性良好，主流浏览器均已支持。

理论要掌握，实操不能落！以上关于《JSResizeObserver监听元素变化教程》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！