ResizeObserverEntry.contentBoxSize

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 接口的只读属性 contentBoxSize 在回调运行时，返回一个包含被监听元素的内容盒大小的数组。

值

一个数组，包含被监听元素的新内容盒大小的对象。该数组在支持多列的场景中出现多个部分的元素时是必要的。数组中的每个对象都包含以下两个属性：

blockSize

被监听的元素在块方向上的内容盒的长度。对于具有水平 writing-mode 的盒子，这是垂直尺寸或者高度；如果 writing-mode 是垂直的，这是水平的尺寸或者宽度。

inlineSize

被监听的元素在内联方向上内容盒的长度。对于具有水平 writing-mode 的盒子，这是水平尺寸或者宽度；如果 writing-mode 是垂直的，这是垂直的尺寸或者高度。

备注： 更多关于书写模式和块以及内联尺寸的解释，请阅读处理不同方向的文本。

示例

以下示例取自 resize-observer-border-radius.html （见源码）。这个示例包含绿色的盒子，大小按照视口大小的百分比变化。当视口的大小改变，盒子的圆角会和盒子的大小成比例的变化。我们可以使用百分比的形式来设置 border-radius，但是很快就得到了丑陋的椭圆形角；以下这个解决方案给你提供了漂亮的方形角，可以随盒子的大小缩放。

js
const resizeObserver = new ResizeObserver((entries) => {
  const calcBorderRadius = (size1, size2) =>
    `${Math.min(100, size1 / 10 + size2 / 10)}px`;

  for (const entry of entries) {
    if (entry.borderBoxSize?.length > 0) {
      entry.target.style.borderRadius = calcBorderRadius(
        entry.borderBoxSize[0].inlineSize,
        entry.borderBoxSize[0].blockSize,
      );
    } else {
      entry.target.style.borderRadius = calcBorderRadius(
        entry.contentRect.width,
        entry.contentRect.height,
      );
    }
  }
});

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

规范

Specification
Resize Observer
# dom-resizeobserverentry-contentboxsize

浏览器兼容性

BCD tables only load in the browser