ResizeObserverEntry: contentRect 属性

contentRect 是 ResizeObserverEntry 接口的只读属性，它返回一个 DOMRectReadOnly 对象，其中包含回调运行时观察元素的新大小。请注意，这比 ResizeObserverEntry.borderBoxSize 或 ResizeObserverEntry.contentBoxSize 支持得更好，但它来自于 Resize Observer API 的早期实现，出于 Web 兼容性原因仍包含在规范中，并且可能在将来的版本中被弃用。

值

包含由 target 属性指示的元素的新大小的 DOMRectReadOnly 对象。

如果 target 是 HTML Element，则返回的 contentRect 是元素的内容框。如果 target 是 SVGElement，则返回的 contentRect 是 SVG 的边界框。

示例

以下代码段取自 resize-observer-text.html (查看源代码) 示例。它使用一个简单的特性检测测试来查看浏览器是否支持较新的 ResizeObserverEntry.contentBoxSize 属性，如果支持，则使用它来获取所需的大小数据。如果不支持，则使用 contentRect。

js
const resizeObserver = new ResizeObserver((entries) => {
  for (const 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
# dom-resizeobserverentry-contentrect

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。