js监听元素大小变化elementresizedetector

以前监听元素尺寸变化可以方便的使用 jQuery 监听元素的 resize 事件：

$('#box').on('resize', function () {console.log('resize')
});

但是后续版本因为性能不佳所以被取消了，自己实现费时费力，所以这里介绍一个开源的插件 element-resize-detector。

插件的下载地址：https://github.com/wnr/element-resize-detector/tree/master/dist
可以选择压缩版和未压缩版，将文件下载到本地。

创建示例
创建一个 html 文件，放入一个红色的正方形 div：

<div id="box" style="width:300px;height:300px;background:red;"></div>

引入 element-resize-detector 插件：

<script src="element-resize-detector.min.js"></script>

增加一个简单的逻辑，点击盒子的时候宽度由 300px 变成 500px：

document.getElementById('box').addEventListener('click', e => {e.target.style.width = '500px';});

实例化插件：

const erd = elementResizeDetectorMaker();

监听该元素，当元素变化时，回调函数的参数是变化的元素，获取该元素的宽高：

erd.listenTo(document.getElementById('box'), element => {
  const width = element.offsetWidth;
  const height = element.offsetHeight;
  console.log("Size:" + width + "x" + height);
});

测试
在浏览器中打开该页面：

点击红色的盒子，盒子变宽：

查看控制台，弹出：

监听盒子大小变化成功。