对元素大小进行监听：ResizeObserver

1. 简介

ResizeObserver 接口可以监听到 Element 的内容区域或 SVGElement 的边界框改变。内容区域则需要减去内边距 padding。

ResizeObserver 避免了在自身回调中调整大小，从而触发的无限回调和循环依赖。它仅通过在后续帧中处理 DOM 中更深层次的元素来实现这一点。如果（浏览器）遵循规范，只会在绘制前或布局后触发调用。

2. 示例

以下示例通过观察 box 的宽度变化从而改变其边框圆角半径。

const resizeObserver = new ResizeObserver(entries => {
	for (let entry of entries) {
		entry.target.style.borderRadius = Math.max(0, 250 - entry.contentRect.width) + 'px';
	}
});
resizeObserver.observe(document.querySelector('.box:nth-child(2)'));

3. 方法

• ResizeObserver.disconnect()
  取消和结束目标对象上所有对 Element 或 SVGElement 观察。

• ResizeObserver.observe()
  开始观察指定的 Element 或 SVGElement。

• ResizeObserver.unobserve(target)
  结束观察指定的Element 或 SVGElement。