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 |
浏览器兼容性
加载中…