Vue + Element UI——监听DOM元素高度和宽度解决方案整理（八种方法）

问题描述

监听DOM元素大小的变化，在前端开发中，算是一个比较常见的需求，比如我们要制作可伸缩的图表的时候，可能需要根据DOM大小的变化，进行动态的更新图表。

解决方案

方法一： 

监听window变化，再改变对应DOM变化

window.onresize = function() {
	const width = getStyle(dom, 'width');
	const height = getStyle(dom, 'height');
}
function getStyle(ele,attr){
  	if(window.getComputedStyle){
        return window.getComputedStyle(ele,null)[attr];
    }
    return ele.currentStyle[attr];
}

通过这样的方式可以进行监听DOM元素的变化，但是不是最完善的。

例：通过js改变一个dom的宽度或者高度，但是window是没有触发resize事件的。 

方法二：

定时轮询 

let timer = 0；
timer = setInterval(() => {
    const style = {
            width: getStyle(dom, 'width'),
            height: getStyle(dom, 'height'),
    };
}, 200)

每过200ms，我们都进行一次dom大小的获取，从而和之前的宽高进行对比，就能知道DOM是否发生了变化。

缺点：开销太大。

方法三：

监听元素的滚动事件，在 目标 dom 里面包裹一个同等大小的 div，是隐藏不可见的，当目标 dom 大小变化时，触发滚动事件。

参考文章：巧妙监测元素尺寸变化

方法四：

MutationObserver

通过 MutationObserver 监听dom 节点变化，MutationObserver 是在DOM4规范中定义的，它的前身是 MutationEvent 事件，该事件最初在 DOM2 事件规范中介绍，到来了 DOM3 事件规范中正式定义，但是由于该事件存在兼容性以及性能上的问题被弃用；可以用它来监听 dom style 的变化

参考文章：

Mutation Observer API

JS监听div的resize事件

方法五：

ResizeObserver

const resizeObserver = new ResizeObserver(entries => {
  for (let entry of entries) {
    console.log(entry.target.style.width)
  }
});
resizeObserver.observe(document.querySelector('.line-numbers'));

参考文章：用vue.js如何实时获取某个div的变化的width，并把数据展示在页面？

方法六：

IE9-10 默认支持 div 的 resize 事件，可以直接通过 div.attachEvent('onresize', handler); 的方式实现;

其它浏览器,通过在 div 中添加一个内置 object 元素实现监听,设置 object 元素的 style 使其填充满 div，这样当 div 的 size 发生变化时，object 的 size 也会发生变化,然后监听 object 元素的 contentDocument.defaultView(window对象)的 resize 事件。

参考文章：JS监听div的resize事件

项目使用分析 

第一，通过setInterval的方式进行监听DOM变化，开销较大。

第二，通过一个简单的API，监听DOM，就进行bind函数的绑定，解除一个DOM的监听，使用类似clear之类的函数解除监听。

第三，支持回调函数。

方法七：

Vue指令

参考文章：监听尺寸元素变化

方法八：

npm项目

例如：

element-resize-detector 

NPM仓库：https://www.npmjs.com/package/element-resize-detector

1、安装：

npm install element-resize-detector

2、使用 

var elementResizeDetectorMaker = require("element-resize-detector")
var erd = elementResizeDetectorMaker()
    erd.listenTo(this.$el, function (element) {
      var width = element.offsetWidth
      var height = element.offsetHeight
      that.$nextTick(function () {
        console.log("Size: " + width + "x" + height)
      })
    })

wd-domsize-monitor

参考文章

vue中监控元素大小变化element-resize-detector

vue+element项目里实时监听某个div宽度的变化，然后执行相应的事件

如何监听DOM大小的变化

js怎么监听div元素的resize