js监听dom大小改变的实现示例，支持vue_vue监听dom尺寸变化-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_25753445/article/details/132487642

本文介绍了如何使用MutationObserver和ResizeObserver在HTML和Vue中监听元素大小的改变，提供两种解决方案，其中ResizeObserver更推荐用于兼容性更好的尺寸监听。

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>js监听dom大小改变的实现示例，支持vue</title>
    <style>
      #asaidom {
        width: 200px;
        height: 200px;
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <p id="asaidomsize"></p>
    <p id="asaidom"></p>
    <button id="btn">改大小</button>
    <script>
      var asaiDomSize = document.getElementById("asaidomsize");
      var asaiDom = document.getElementById("asaidom");

      // 方案一：html上可以用，vue中无法使用
      const moServer =
        window.MutationObserver ||
        window.WebKitMutationObserver ||
        window.MozMutationObserver;
      const observer = new moServer((mutations) => {
        console.log("666.909", mutations);
      });
      observer.observe(asaiDom, {
        attributes: true,
        attributeFilter: ["style"],
        attributeOldValue: true,
      });

      // 方案二：html可用，vue可用（推荐）
      const resizeObserver = new ResizeObserver((entries) => {
        for (const entry of entries) {
          // console.log(entry.target.style.width); // 仅适用于真的改变了style样式中的width
          asaiDomSize.innerText = document.defaultView.getComputedStyle(
            entry.target
          ).width;
          console.log(
            666.9098,
            document.defaultView.getComputedStyle(entry.target).width
          );
        }
      });
      resizeObserver.observe(asaiDom);

      document.getElementById("btn").onclick = function () {
        asaiDom.style.width = parseInt(Math.random() * 100) + "px";
      };
    </script>
  </body>
</html>