ResizeObserverEntry

Baseline 広く利用可能 *

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2020年7月以降、すべてのブラウザーで利用可能です。

* この機能の一部は、対応レベルが異なる場合があります。

もっと詳しく
完全な互換性情報を見る

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);

仕様書

仕様書
Resize Observer # resize-observer-entry-interface

ブラウザーの互換性

MDN の改良に協力

協力方法を知る

このページは MDN の貢献者によって 2025年3月21日に最終更新されました。

GitHub でこのページを表示 • このコンテンツに関する問題を報告