ResizeObserverEntry

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2020.

ResizeObserverEntry 接口是传递给 ResizeObserver() 构造函数中的回调函数参数的对象，它允许你获取真正在观察的 Element 或 SVGElement 最新的大小。

属性

ResizeObserverEntry.borderBoxSize 只读

一个对象，当运行回调时，该对象包含着正在观察元素的新边框盒的大小。

ResizeObserverEntry.contentBoxSize 只读

一个对象，当运行回调时，该对象包含着正在观察元素的新内容盒的大小。

ResizeObserverEntry.devicePixelContentBoxSize 只读

一个对象，当运行回调时，该对象包含着正在观察元素的新内容盒的大小（以设备像素为单位）。

ResizeObserverEntry.contentRect 只读

一个对象，当运行回调时，该对象包含着正在观察元素新大小的 DOMRectReadOnly 对象。请注意，这比以上两个属性有着更好的支持，但是它是 Resize Observer API 早期实现遗留下来的，出于对浏览器的兼容性原因，仍然被保留在规范中，并且在未来的版本中可能被弃用。

ResizeObserverEntry.target 只读

对正在观察 Element 或 SVGElement 的引用。

备注： 内容盒是放置内容的盒子，即边框盒减去内边距和边框宽度。边框盒包含内容、内边距和边框。更多解释参见盒模型。

方法

无。

示例

以下片段取自 resize-observer-text.html（参见源代码）示例。这使用了一个简单的特征检查去查看是否浏览器支持较新的 contentBoxSize 属性——如果支持，它将使用它获取需要的尺寸数据。如果不支持，它将使用一个较旧的 contentRect 属性。

js
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);

规范

Specification
Resize Observer
# resize-observer-entry-interface

浏览器兼容性

BCD tables only load in the browser