JS如何监听元素尺寸变化？

本文深入介绍了 JavaScript 中监听元素尺寸变化的现代解决方案——ResizeObserver API，它无需轮询或依赖窗口 resize 事件，即可精准、高效地响应由 CSS、JS 或内容动态变化（如图片加载、文字换行）引发的 layout 尺寸变动；文章详述了其核心用法（observe/unobserve/disconnect）、典型应用场景（如自动同步侧边栏高度）、关键细节（contentRect 数据结构、仅响应 content box 变化），并明确指出主流浏览器的良好兼容性及 IE 下的 polyfill 或降级策略，是构建高性能、自适应 Web 界面不可或缺的实用工具。

ResizeObserver 是 JavaScript 中专门用来监听元素尺寸变化的 API，不用轮询、不依赖窗口 resize 事件，能精准响应元素宽高变动（包括由 CSS、JS 或内容变化引发的改变）。

ResizeObserver 的基本用法

创建实例时传入一个回调函数，该函数接收两个参数：entries（变化的观察项列表）和 observer（当前实例）。每个 entry 包含 target（被观察的元素）和 contentRect（最新尺寸信息）。

• 调用 observe(element) 开始监听指定元素
• 可同时观察多个元素，多次调用 observe 即可
• 用 unobserve(element) 停止监听单个元素，或 disconnect() 彻底停止所有监听

监听常见场景示例

比如监听一个卡片容器，当它因内部图片加载完成或文字换行而变高时，自动调整侧边栏高度：

const card = document.querySelector('.card');
const observer = new ResizeObserver(entries => {
  for (let entry of entries) {
    console.log('新宽度：', entry.contentRect.width);
    console.log('新高度：', entry.contentRect.height);
    // 这里写你的响应逻辑，比如重绘图表、调整布局等
  }
});
observer.observe(card);

注意兼容性和替代方案

现代浏览器（Chrome 64+、Firefox 69+、Safari 13.1+、Edge 79+）原生支持。IE 完全不支持，需用 polyfill（如 juggle/resize-observer）或降级为监听 window.resize + getBoundingClientRect 轮询（不推荐，性能差）。

ResizeObserver 不监听滚动、透明度、z-index 等非尺寸属性变化，也不响应父容器 transform 缩放带来的视觉尺寸变化——它只关心 layout 尺寸（content box）的真实变动。

基本上就这些。用对了，页面自适应逻辑会干净很多。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。