ResizeObserverEntry - 传递给 ResizeObserver() 构造函数的回调函数的对象

ResizeObserverEntry 接口代表传递给 ResizeObserver() 构造函数的回调函数的对象，该函数可让您访问被观察到的 Element 或 SVGElement。

属性

ResizeObserverEntry.borderBoxSize 只读

运行回调时，包含观察到的元素的新边框盒子大小的对象。

ResizeObserverEntry.contentBoxSize 只读

运行回调时，包含观察到的元素的新内容盒子大小的对象。

ResizeObserverEntry.contentRect 只读

一个 DOMRectReadOnly 对象，其中包含在运行回调时观察到的元素的新大小。请注意，它比上面的两个属性有更好地支持，但是它是 Resize Observer API 的较早实现遗留下来的，出于 Web 兼容的原因，它仍然包含在规范中，并且可能在以后的版本中弃用。

ResizeObserverEntry.target 只读

观察到对 Element 或 SVGElement 的引用。

注意：内容盒子是可以放置内容的盒子，表示边框盒子减去填充（padding）和边框宽度。边框盒子（border box）包含内容，填充（padding）和边框。有关更多说明，请参见盒子模型。

方法

无。

实例

以下摘录摘自 resize-observer-text.html（参见源代码）实例。它使用简单的功能检测测试来查看浏览器是否支持较新的 contentBoxSize 属性 - 如果支持，它将使用该属性来获取所需的大小调整数据。如果不是，它将使用较旧的 contentRect 属性。

const resizeObserver = new ResizeObserver(entries => {
  for (let entry of entries) {
    if(entry.contentBoxSize) {
      h1Elem.style.fontSize = Math.max(1.5, entry.contentBoxSize.inlineSize/200) + 'rem';
      pElem.style.fontSize = Math.max(1, entry.contentBoxSize.inlineSize/600) + 'rem';
    } else {
      h1Elem.style.fontSize = Math.max(1.5, entry.contentRect.width/200) + 'rem';
      pElem.style.fontSize = Math.max(1, entry.contentRect.width/600) + 'rem';
    }
  }
});

resizeObserver.observe(divElem);

规范

规范	状态	备注
Resize Observer ResizeObserverEntry 的定义	编者的草案	初始定义。

桌面浏览器兼容性

移动浏览器兼容性