如何检测DOM元素尺寸变化？

Question

如何检测DOM元素尺寸变化？
window对象有resize事件可以触发，因此可以检查窗口大小变化。
但是如何才能让dom元素尺寸变化时触发一个事件呢？有这样的事件么？

Answer 1

也遇到这个问题，后来使用监听元素滚动事件来解决了。参考文章

Answer 2

通常大家都没有这么干的。题主可以思考一下是否真的有必要这么干？
因为所有DOM元素的大小改变肯定都是通过JS去实现的，因此改变的过程是可以控制。在这样的情况下，是否可以主动地在改变DOM元素的同时，做一些你要做的事呢？

Answer 3

印象中好像没有；
可以考虑自定义事件，设置一定条件（例如DOM元素尺寸变化）下触发，再设置相应的事件处理函数。

Answer 4

可以试试看MutationObserver
https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

另外，除了Chrome插件之类的少数场景，DOM大小改变这件事情应该多数情况下是你自己写的JS触发的，自己负责触发一个事件不是更好么

Answer 5

本来想用 MutationObserver 监测 style 变化, 发现不是直接写的 style="..." 发生变化它就不触发...
后来有人提到了, element-resize-detector , 搜了一下用了, 还蛮好用的, 全局搜索还发现项目用的 UI 框架 iview 也用了这个插件

Answer 6

基于 Vue3.0 的指令编写 DOM 元素尺寸变化的 v-resize

使用方式

<div v-resize="test">测试</div>

  directives: {
    resize: {
      mounted(el, binding) {
        const resizeListener = (e) => {
          requestAnimationFrame(function () {
            var el = e.target || e.srcElement;
            var trigger = el.__resizeTrigger__;
            trigger.__resizeListeners__.forEach(function (fn) {
              fn.call(trigger, e);
            });
          });
        };

        const objectLoad = function () {
          this.contentDocument.defaultView.__resizeTrigger__ = this.__resizeElement__;
          this.contentDocument.defaultView.addEventListener(
            "resize",
            resizeListener
          );
        };

        const addResizeListener = (el, fn) => {
          if (!el.__resizeListeners__) {
            el.__resizeListeners__ = [];
          }
          if (getComputedStyle(el).position == "static")
            el.style.position = "relative";
          var obj = (el.__resizeTrigger__ = document.createElement("object"));
          obj.setAttribute(
            "style",
            "display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden; pointer-events: none; z-index: -1;"
          );
          obj.__resizeElement__ = el;
          obj.onload = objectLoad;
          obj.type = "text/html";
          el.appendChild(obj);
          el.__resizeListeners__.push(fn);
        };

        addResizeListener(el, binding.value);
      },
      beforeUnmount(el) {
        el.removeChild(el.__resizeTrigger__);
      },
    },
  },