ResizeObserverEntry：borderBoxSize 属性

borderBoxSize 是 ResizeObserverEntry 接口的只读属性，在回调函数运行时返回一个包含被观察元素的新边框框大小的数组。

值

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

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"));

规范

规范
Resize Observer
# dom-resizeobserverentry-borderboxsize

浏览器兼容性

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