ResizeObserverEntry: target プロパティ
target
は ResizeObserverEntry
インターフェイスの読み取り専用プロパティで、監視対象の Element
または SVGElement
への参照を返します。
値
監視対象の要素を表す Element
または SVGElement
です。
例
次のスニペットは resize-observer-border-radius.html
(ソースを表示)の例から取りました。
この例では、ビューポートサイズに対するパーセント値でサイズ設定された緑色のボックスが含まれています。ビューポートサイズが変更されると、ボックスの丸みを帯びた角がボックスのサイズに比例して変更されます。
パーセント値で border-radius
を使用してこれを実装することもできますが、これではすぐに見苦しい楕円形の角になってしまいます。このソリューションでは、ボックスのサイズに比例した美しい四角形の角が得られます。
このように、変更するたびに border-radius
の値を更新できるように、観測された要素への参照を取得するために、各エントリーの 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"));
仕様書
Specification |
---|
Resize Observer # dom-resizeobserverentry-target |
ブラウザーの互換性
BCD tables only load in the browser