ResizeObserverEntry
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 |
ブラウザーの互換性
BCD tables only load in the browser