ResizeObserverEntry：contentBoxSize 属性

contentBoxSize 是 ResizeObserverEntry 接口的只读属性，它返回一个数组，其中包含在回调运行时观察元素的新的内容框大小。

值

包含对象的数组，其中包含观察元素的新的内容框大小。该数组对于支持具有多个片段的元素是必需的，这些片段出现在多列场景中。数组中的每个对象包含两个属性

blockSize: 观察元素内容框在块维度上的长度。对于具有水平 writing-mode 的框，这是垂直维度或高度；如果写作模式是垂直的，则这是水平维度或宽度。
inlineSize: 观察元素内容框在内联维度上的长度。对于具有水平 writing-mode 的框，这是水平维度或宽度；如果写作模式是垂直的，则这是垂直维度或高度。

注意：有关写作模式以及块和内联维度的更多解释，请阅读处理不同的文本方向。

示例

以下代码段取自 resize-observer-border-radius.html (查看源代码) 示例。此示例包含一个绿色框，其大小为视窗大小的百分比。当视窗大小更改时，框的圆角会按比例更改以适应框的大小。我们可以使用 border-radius 和百分比来实现这一点，但这会导致难看的椭圆形角；此解决方案为您提供了随框大小缩放的漂亮的方形角。

const resizeObserver = new ResizeObserver((entries) => {
  for (let entry of entries) {
    if (entry.contentBoxSize) {
      // The standard makes contentBoxSize an array...
      if (entry.contentBoxSize[0]) {
        entry.target.style.borderRadius =
          Math.min(
            100,
            entry.contentBoxSize[0].inlineSize / 10 +
              entry.contentBoxSize[0].blockSize / 10,
          ) + "px";
      } else {
        // ...but old versions of Firefox treat it as a single item
        entry.target.style.borderRadius =
          Math.min(
            100,
            entry.contentBoxSize.inlineSize / 10 +
              entry.contentBoxSize.blockSize / 10,
          ) + "px";
      }
    } else {
      entry.target.style.borderRadius =
        Math.min(
          100,
          entry.contentRect.width / 10 + entry.contentRect.height / 10,
        ) + "px";
    }
  }
});

resizeObserver.observe(document.querySelector("div"));

规范

规范
Resize Observer # dom-resizeobserverentry-contentboxsize

浏览器兼容性

BCD 表格仅在浏览器中加载