ResizeObserverEntry: contentRect プロパティ

Baseline 広く利用可能

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

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

contentRect は ResizeObserverEntry インターフェイスの読み取り専用プロパティで、コールバックが実行されたときに DOMRectReadOnly オブジェクトの形で監視中の要素の新しい寸法を返します。なお、これは ResizeObserverEntry.borderBoxSize や ResizeObserverEntry.contentBoxSize よりも広く対応されていますが、 Resize Observer API では早期に除外され、現在は互換性の目的で仕様書に存在しているため、将来のバージョンでは非推奨になる可能性があります。

値

DOMRectReadOnly オブジェクトで、 target プロパティで示された要素の新しい寸法が入ります。

target が HTML の Element である場合、返される contentRect は要素のコンテンツボックスです。 target が SVGElement である場合、返される contentRect は SVG のバウンディングボックスです。

例

以下のスニペットは resize-observer-text.html (ソースを参照) の例から取ったものです。これは簡単な機能検出テストを使用して、ブラウザーがより新しい ResizeObserverEntry.contentBoxSize プロパティに対応しているかどうかを確認します。 — もし対応していれば、こちらを使用して必要な寸法のデータを取得します。そうでない場合は、 contentRect を使用します。

const resizeObserver = new ResizeObserver((entries) => {
 for (const entry of entries) {
 if (entry.contentBoxSize) {
 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`;
 }
 }
});
resizeObserver.observe(divElem);

仕様書

仕様書
Resize Observer # dom-resizeobserverentry-contentrect

ブラウザーの互換性

MDN の改良に協力

協力方法を知る

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

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