js 监听一个元素大小发生变化

最新推荐文章于 2025-06-24 11:18:14 发布

原创最新推荐文章于 2025-06-24 11:18:14 发布 · 1.3k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #html

本文介绍了如何在JavaScript中利用ResizeObserverAPI来监听指定div元素的宽高变化，以便实时获取其尺寸信息并进行相应的处理。

// 获取要监听的 div 元素
const myDiv = document.querySelector('#myDiv');

// 创建 ResizeObserver 实例，并传入回调函数
const observer = new ResizeObserver(entries => {
  // 遍历 entries 数组，获取目标元素和它的大小信息
  for (let entry of entries) {
    const target = entry.target;
    const width = target.clientWidth;
    const height = target.clientHeight;

    // 在控制台输出宽度信息
    console.log(`${width}px, ${height}px`);
  }
});

// 将要监听的 div 元素传入 ResizeObserver 实例
observer.observe(myDiv);