JavaScript 中 DOM 查询怎么在元素尺寸变化时结合 ResizeObserver 监听 DOM-js教程-PHP中文网

ResizeObserver 监听元素尺寸变化比轮询或 window.resize 更精准高效，支持 content/border box，异步回调不触发重排重绘，需挂载后观察、卸载前清理，现代浏览器原生支持。

javascript 中 dom 查询怎么在元素尺寸变化时结合 resizeobserver 监听 dom

当元素尺寸发生变化时，用 ResizeObserver 监听比轮询或绑定 window.resize 更精准、高效，尤其适合动态内容、响应式布局或第三方组件嵌入场景。它能直接响应目标元素的 content box（默认）或 border box 的变化，且不触发重排重绘。

创建并启动 ResizeObserver 实例

先实例化观察器，传入一个回调函数，该函数接收两个参数：变化记录列表（entries）和观察器实例本身。每条记录包含 target（被观察元素）和 contentRect（含 width/height 等尺寸信息）。

确保在元素挂载到 DOM 后再开始观察，否则会报错
一个观察器可同时观察多个元素，调用 observe(el) 多次即可
使用 unobserve(el) 停止监听单个元素，disconnect() 彻底停止所有监听

监听指定 DOM 元素的尺寸变化

选中目标元素后，调用 observe() 即可。注意：ResizeObserver 默认观测 content box，若需 border box，需配合 CSS box-sizing: border-box 并读取 borderBoxSize（需检查浏览器支持）。

Java Api Extractor

从 Java 项目中提取 Controller 层接口定义为 JSON 数据。

下载

const target = document.querySelector('#my-panel');
const ro = new ResizeObserver(entries => {
  for (const entry of entries) {
    const { width, height } = entry.contentRect;
    console.log('尺寸更新：', width, 'x', height);
    // 在这里执行适配逻辑，如调整子元素、重绘 Canvas、更新虚拟滚动范围等
  }
});
ro.observe(target); // 开始监听