当前位置：首页 > 文章列表 > 文章 > 前端 > JSResizeObserverAPI怎么用？元素变化监听教程

JSResizeObserverAPI怎么用？元素变化监听教程

2026-02-13 13:42:40 0浏览收藏

ResizeObserver 是什么，它解决什么问题

ResizeObserver 是浏览器原生的 API，用来异步监听 DOM 元素的尺寸变化（content-box 尺寸，默认不包含 padding/border/margin）。它替代了过去靠 window.addEventListener('resize') + getBoundingClientRect() 轮询或 MutationObserver 拦截样式变更等笨重方案，专为「某个元素自身大小变了」这个场景设计。

怎么创建并使用 ResizeObserver 实例

必须用 new ResizeObserver(callback) 构造，回调函数接收两个参数：entries（ResizeObserverEntry 数组）和 observer（当前实例）。每个 entry 包含 target（被观察元素）和 contentRect（尺寸信息对象）。

const ro = new ResizeObserver(entries => {
  for (const entry of entries) {
    console.log(entry.contentRect.width, entry.contentRect.height);
    // 注意：entry.contentRect 是只读对象，不是 DOMRect，但结构相似
  }
});

ro.observe(document.querySelector('#my-box'));

一个 ResizeObserver 实例可观察多个元素，多次调用 observe(el) 即可
unobserve(el) 可停止对某元素的监听；disconnect() 清空全部监听
回调是异步触发的，且会合并同一批次的尺寸变更（类似 requestIdleCallback 的批处理逻辑）

常见失效原因和兼容性注意点

它不会响应所有“看起来像尺寸变化”的操作。比如：visibility: hidden、opacity: 0、transform: scale() 都不会触发；元素未插入文档流（display: none 或未 append 到 body）时也不会上报。

IE 完全不支持，Safari 13.1+ 才开始稳定支持，移动端需留意 Android WebView 版本
如果元素宽高由父容器百分比撑开，但父容器本身没变，子元素也不会触发——ResizeObserver 只看该元素自身的 contentRect 是否重算
使用 box-sizing: border-box 时，contentRect 依然只反映 content 区域，border/padding 不计入
在 Shadow DOM 中工作正常，但需确保观察的是 ShadowRoot 内的真实元素节点

与 CSS Container Queries 的关系

ResizeObserver 是 JS 层的底层能力，而 @container 是 CSS 原生的容器查询机制。两者目标重叠（响应容器尺寸），但定位不同：前者灵活可控、可编程，后者声明式、性能更优且支持动画过渡。目前（2024）container queries 已在主流浏览器启用，但复杂逻辑（如动态计算比例、联动其他状态）仍绕不开 ResizeObserver。

真正容易被忽略的是：当元素尺寸因 CSS 动画或 transition 改变时，ResizeObserver 不会逐帧触发，只会在布局重排（reflow）完成后的下一个微任务中报告最终值——它不监听中间过程。

今天关于《JSResizeObserverAPI怎么用？元素变化监听教程》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！