js监听元素大小变化（element-resize-detector）

之前监听元素尺寸变化能够方便的使用 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);
});

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

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

查看控制台，弹出：

监听盒子大小变化成功。