ResizeObserverEntry.contentRect

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

構文

var contentRect = resizeObserverEntry.contentRect;

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

target が HTML の Element である場合、返される contentRect は要素のコンテンツボックスです。 targetSVGElement である場合、返される contentRect は SVG の囲み枠です。

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

const resizeObserver = new ResizeObserver(entries => {
  for (let 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
contentRect の定義
編集者草案 初回定義

ブラウザーの互換性

BCD tables only load in the browser