js 监听div的resize事件

LifeFuture1994

已于 2023-01-29 13:09:52 修改

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： javascript 前端 html

于 2023-01-29 13:08:06 首次发布

原文链接：https://www.jianshu.com/p/1b572ab435c6

前端专栏收录该内容

190 篇文章

订阅专栏

本文介绍了一种使用ResizeObserver API来监听HTML元素尺寸变化的方法。通过示例代码展示了如何实现对特定div元素的尺寸变化监听，并记录变化信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们平时在监听resize变化时，一般监听的都是window/body。

可以绑定onresize的标签 body

可以绑定onresize的对象 window

只有一个起作用,后定义覆盖前定义的

但是有时我们希望监听div的resize变化该怎么办呢？尤其是现在css提供了resize属性。

解决方案如下：

通过添加object(text/html), http://www.backalleycoder.com

https://github.com/sdecima

https://caniuse.com

定时器 + getComputeStyle

基于resze和MutationOberver https://github.com/que-etc/re...

写了一个小示例，基于ResizeObserver API

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div
      id="div"
      style="
        width: 300px;
        height: 300px;
        border: 1px solid red;
        resize: both;
        overflow: hidden;
      "
    ></div>
    <script>
      const resizeObserver = new ResizeObserver(onResize);
      resizeObserver.observe(document.querySelector('#div'));

      function onResize(e) {
        console.log(e);
      }
    </script>
  </body>
</html>