ResizeObserver.ResizeObserver()

Experimental

这是一个实验中的功能
此功能某些浏览器尚在开发中，请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订，所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

ResizeObserver 构造器创新一个新的 ResizeObserver 对象，用于接收 Element内容区域的改变或 SVGElement 的边界框改变改变。

语法

var ResizeObserver = new ResizeObserver(callback)

参数

回调函数: The method called whenever a resize occurs. The method is called with an array of ResizeObserverEntry objects.
当尺寸发生变化时触发回调，使用ResizeObserverEntry对象数组调用该方法。

示例

The following example shows the dimensions of a box inside it, as text, upon resizing.
下面示例展示了box调整大小时，其内部文本显示为尺寸大小。

const resizeObserver = new ResizeObserver(entries => {
  for (let entry of entries) {
    const boxEl = entry.target;
    const dimensions = entry.contentRect;
    boxEl.textContent = `${dimensions.width} x ${dimensions.height}`;
  }
});
resizeObserver.observe(document.querySelector('.box:nth-child(2)'));

规范

Specification	Status	Comment
Resize Observer ResizeObserver	Editor's Draft	Initial definition.

浏览器兼容性

BCD tables only load in the browser