监听某个元素的宽度变化-ResizeObserver

问题描述

项目中需要监听某个特定元素的宽度变化。

解决方案

ResizeObserver 接口可以监听到 Element 的内容区域或 SVGElement的边界框改变。内容区域则需要减去内边距 padding。（有关内容区域、内边距资料见盒子模型 ）
ResizeObserver 避免了在自身回调中调整大小，从而触发的无限回调和循环依赖。它仅通过在后续帧中处理 DOM 中更深层次的元素来实现这一点。如果（浏览器）遵循规范，只会在绘制前或布局后触发调用。

MDNResizeObserver

const ro = new ResizeObserver(entries => {
  for (const entry of entries) {
    const cr = entry.contentRect;
    // console.log('Element:', entry.target)
    // console.log(`Element size: ${cr.width}px x ${cr.height}px`)
    // console.log(`Element padding: ${cr.top}px ; ${cr.left}px`)
  }
});
ro.observe(document.querySelector('target-element'));