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);
});

測試
在瀏覽器中打開該頁面：

點擊紅色的盒子，盒子變寬：

查看控制檯，彈出：

監聽盒子大小變化成功。