ResizeObserverEntry.borderBoxSize

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

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

blockSize

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

inlineSize

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

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

示例

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-borderboxsize

浏览器兼容性

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
borderBoxSize

Legend

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

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