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

  • 可以绑定onresize的标签 body
  • 可以绑定onresize的对象 window
  • 只有一个起作用,后定义覆盖前定义的

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

解决方案如下：
<!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>

运行结果




JavaScript * DOM： 监听div的resize事件_html