ResizeObserverEntry

Experimental

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

ResizeObserverEntry 接口是传递给ResizeObserver() 构造器回调函数中的参数对象。

属性

ResizeObserverEntry.contentRect (en-US)  这是一个实验性的 API，请尽量不要在生产环境中使用它。 只读
对改变尺寸大小的元素的 DOMRectReadOnly引用（包含x,y,width,height,top,right,bottom,left属性）。
ResizeObserverEntry.target (en-US)  这是一个实验性的 API，请尽量不要在生产环境中使用它。 只读
当前改变尺寸大小的元素的 Element 引用
 

事件

无

方法

无.

示例

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

const resizeOserver = 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)'));

规范

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

浏览器兼容性

BCD tables only load in the browser