ResizeObserverEntry: target 屬性
target 是 ResizeObserverEntry 介面的一個只讀屬性，它返回對正在被觀察的 Element 或 SVGElement 的引用。
值
一個 Element 或 SVGElement，表示正在被觀察的元素。
示例
以下程式碼片段取自 resize-observer-border-radius.html（檢視原始碼）示例。這個示例包含一個綠色的盒子，其大小是視口大小的百分比。當視口大小改變時，盒子的圓角會按比例改變。我們可以使用百分比的 border-radius 來實現這個功能，但這很快會導致難看的橢圓形角；而這個解決方案為你提供了漂亮的方形角，並且可以隨盒子大小縮放。
為了獲取被觀察元素的引用，以便在每次更改後更新其 border-radius 值，我們使用了每個 entry 的 target 屬性，即 entry.target.style.borderRadius。
js
const resizeObserver = new ResizeObserver((entries) => {
for (const entry of entries) {
if (entry.contentBoxSize) {
entry.target.style.borderRadius = `${Math.min(
100,
entry.contentBoxSize.inlineSize / 10 +
entry.contentBoxSize.blockSize / 10,
)}px`;
} else {
entry.target.style.borderRadius = `${Math.min(
100,
entry.contentRect.width / 10 + entry.contentRect.height / 10,
)}px`;
}
}
});
resizeObserver.observe(document.querySelector("div"));
規範
| 規範 |
|---|
| Resize Observer（調整大小觀察器） # dom-resizeobserverentry-target |
瀏覽器相容性
載入中…