ResizeObserverEntry
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2020.
* Some parts of this feature may have varying levels of support.
ResizeObserverEntry インターフェイスは、 ResizeObserver() コンストラクターのコールバック関数に渡されるオブジェクトを表します。これにより、監視対象の Element または SVGElement の新しい寸法にアクセスすることができます。
インスタンスプロパティ
ResizeObserverEntry.borderBoxSize読取専用-
コールバックが実行されたときに監視された要素の新しい境界ボックスサイズを含むオブジェクトの配列です。
ResizeObserverEntry.contentBoxSize読取専用-
コールバックが実行されたときに監視された要素の新しいコンテンツボックスサイズを含むオブジェクトの配列です。
ResizeObserverEntry.devicePixelContentBoxSize読取専用-
コールバック実行時に監視される要素の新しいコンテンツボックスサイズをデバイスピクセル単位で含むオブジェクトの配列です。
ResizeObserverEntry.contentRect読取専用-
コールバックが実行されたときに監視された要素の新しいサイズを含む
DOMRectReadOnlyオブジェクトです。これは、上記の 2 つのプロパティよりも対応されていますが、リサイズオブザーバー API の以前の実装から残ったものであり、ウェブの互換性のために仕様に含まれているため、将来のバージョンで非推奨となる可能性があることに注意してください。 ResizeObserverEntry.target読取専用-
監視対象の
ElementまたはSVGElementオブジェクト。
メモ: コンテンツボックスは、コンテンツを配置できるボックスで、境界ボックスからパディングと境界の幅を除いたものを意味します。境界ボックスは、コンテンツ、パディング、境界を包含します。さらなる説明はボックスモデルを参照してください。
インスタンスメソッド
なし。
例
以下のスニペットは resize-observer-text.html （ソースを参照）の例から取ったものです。
なお、このコードは 3 つの異なる互換性のケースに応じたものです。
- 古いブラウザーでは、
contentRectには対応していても、contentBoxSizeは対応していない場合があります。 - 古いバージョンの Firefox は
contentBoxSizeに対応していますが、誤って配列ではなく単一のオブジェクトとして実装していました。 - 現代のブラウザーは
contentBoxSizeをオブジェクトの配列として対応しており、断片化された要素（例えば複数段組みの場合）のボックスサイズを報告できるようになっています。
const resizeObserver = new ResizeObserver((entries) => {
for (let 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);
仕様書
| Specification |
|---|
| Resize Observer # resize-observer-entry-interface |