ResizeObserverEntry

ResizeObserverEntry 接口表示传递给 ResizeObserver() 构造函数的回调函数的对象，它允许您访问正在观察的 Element 或 SVGElement 的新尺寸。

实例属性

ResizeObserverEntry.borderBoxSize 只读: 一个对象数组，包含在回调函数运行时观察到的元素的新边框框大小。
ResizeObserverEntry.contentBoxSize 只读: 一个对象数组，包含在回调函数运行时观察到的元素的新内容框大小。
ResizeObserverEntry.devicePixelContentBoxSize 只读: 一个对象数组，包含在回调函数运行时观察到的元素的新内容框大小（以设备像素为单位）。
ResizeObserverEntry.contentRect 只读: 一个 DOMRectReadOnly 对象，包含在回调函数运行时观察到的元素的新大小。请注意，这现在是一个遗留属性，仅出于向后兼容性的原因才保留在规范中。
ResizeObserverEntry.target 只读: 对正在观察的 Element 或 SVGElement 的引用。

注意：内容框是可以放置内容的框，即边框框减去填充和边框宽度。边框框包含内容、填充和边框。有关更多说明，请参阅盒子模型。

实例方法

无。

示例

以下代码段取自 resize-observer-text.html (查看源代码) 示例。

请注意，代码涵盖了三种不同的兼容性情况

一些旧版浏览器可能支持 contentRect 但不支持 contentBoxSize。
旧版 Firefox 支持 contentBoxSize，但错误地将其实现为单个对象而不是数组。
现代浏览器支持将 contentBoxSize 作为对象数组，以使它们能够报告碎片化元素的框大小（例如，在多列场景中）。

const resizeObserver = new ResizeObserver((entries) => {
  for (let entry of entries) {
    if (entry.contentBoxSize) {
      // The standard makes contentBoxSize an array...
      if (entry.contentBoxSize[0]) {
        h1Elem.style.fontSize =
          Math.max(1.5, entry.contentBoxSize[0].inlineSize / 200) + "rem";
        pElem.style.fontSize =
          Math.max(1, entry.contentBoxSize[0].inlineSize / 600) + "rem";
      } else {
        // ...but old versions of Firefox treat it as a single item
        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";
    }
  }
  console.log("Size changed");
});

resizeObserver.observe(divElem);

规范

规范
Resize Observer # resize-observer-entry-interface

浏览器兼容性

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