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

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
contentBoxSize

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
Has more compatibility info.