ResizeObserverEntry.contentRect

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 接口的只读属性 contentRect 在回调运行时，返回一个包含被监听元素大小的 DOMRectReadOnly 对象。注意，该属性比 ResizeObserverEntry.borderBoxSize 或 ResizeObserverEntry.contentBoxSize 有着更好的支持，但是它是在 Resize Observer API 早期实现遗留下来的，出于对浏览器的兼容性原因，仍然保留在规范中，并且在未来的版本中可能被弃用。

值

一个 DOMRectReadOnly 对象，包含着 target 属性表示的元素的新的大小。

如果 target 是一个 HTML 元素，返回的 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);

规范

Specification
Resize Observer
# dom-resizeobserverentry-contentrect

浏览器兼容性

BCD tables only load in the browser