このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。
ResizeObserverEntry: target プロパティ
Baseline
広く利用可能
この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2020年7月以降、すべてのブラウザーで利用可能です。
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"));
仕様書
| 仕様書 |
|---|
| Resize Observer # dom-resizeobserverentry-target |
ブラウザーの互換性
ブラウザー互換性一覧表を表示するには、JavaScript を有効にしてください。