ResizeObserverEntry
Baseline 廣泛可用 *
ResizeObserverEntry 介面代表傳遞給 ResizeObserver() 建構函式的回撥函式的物件，它允許您訪問被觀察的 Element 或 SVGElement 的新尺寸。
例項屬性
ResizeObserverEntry.borderBoxSize只讀-
當回撥執行時，包含被觀察元素的新的邊框盒尺寸的物件陣列。
ResizeObserverEntry.contentBoxSize只讀-
當回撥執行時，包含被觀察元素的新的內容盒尺寸的物件陣列。
ResizeObserverEntry.devicePixelContentBoxSize只讀-
當回撥執行時，包含被觀察元素以 裝置畫素 為單位的新的內容盒尺寸的物件陣列。
ResizeObserverEntry.contentRect只讀-
一個
DOMRectReadOnly物件，包含當回撥執行時被觀察元素的新尺寸。請注意，這是為了向後相容而保留在規範中的一個遺留屬性。 ResizeObserverEntry.target只讀-
對被觀察的
Element或SVGElement的引用。
注意： 內容盒是放置內容的盒子，即邊框盒減去內邊距和邊框寬度。邊框盒包含內容、內邊距和邊框。有關更多解釋，請參閱 盒模型。
例項方法
無。
示例
下面的程式碼片段摘自 resize-observer-text.html （檢視原始碼）示例。
請注意，該程式碼涵蓋了三種不同的相容性情況：
- 一些舊瀏覽器可能支援
contentRect但不支援contentBoxSize。 - Firefox 的舊版本支援
contentBoxSize，但錯誤地將其實現為一個物件而不是陣列。 - 現代瀏覽器支援
contentBoxSize作為物件陣列，以便它們能夠報告碎片化元素的盒尺寸（例如，在多列場景中）。
js
const resizeObserver = new ResizeObserver((entries) => {
for (const entry of entries) {
if (entry.contentBoxSize) {
// The standard makes contentBoxSize an array...
if (entry.contentBoxSize[0]) {
h1Elem.style.fontSize = `${Math.max(1.5, entry.contentBoxSize[0].inlineSize / 200)}rem`;
pElem.style.fontSize = `${Math.max(1, entry.contentBoxSize[0].inlineSize / 600)}rem`;
} else {
// … but old versions of Firefox treat it as a single item
h1Elem.style.fontSize = `${Math.max(1.5, entry.contentBoxSize.inlineSize / 200)}rem`;
pElem.style.fontSize = `${Math.max(1, entry.contentBoxSize.inlineSize / 600)}rem`;
}
} else {
h1Elem.style.fontSize = `${Math.max(1.5, entry.contentRect.width / 200)}rem`;
pElem.style.fontSize = `${Math.max(1, entry.contentRect.width / 600)}rem`;
}
}
console.log("Size changed");
});
resizeObserver.observe(divElem);
規範
| 規範 |
|---|
| Resize Observer（調整大小觀察器） # resize-observer-entry-interface |
瀏覽器相容性
載入中…