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

最新推荐文章于 2024-05-16 09:52:34 发布

熬夜小宝贝

最新推荐文章于 2024-05-16 09:52:34 发布

阅读量1.2k

点赞数 12

CC 4.0 BY-SA版权

文章标签： javascript 前端 html

本文链接：https://blog.youkuaiyun.com/CycleByle/article/details/135845110

// 获取要监听的 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);