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 |
瀏覽器相容性
載入中…