ResizeObserverEntry

ResizeObserverEntry.borderBoxSize 読取専用

コールバックが実行されたときに監視された要素の新しい境界ボックスサイズを含むオブジェクト。

ResizeObserverEntry.contentBoxSize 読取専用

コールバックが実行されたときに監視された要素の新しいコンテンツボックスサイズを含むオブジェクト。

ResizeObserverEntry.devicePixelContentBoxSize 読取専用

コールバック実行時に監視される要素の新しいコンテンツボックスサイズをデバイスピクセル単位で含むオブジェクト。

ResizeObserverEntry.contentRect 読取専用

コールバックが実行されたときに監視された要素の新しいサイズを含む DOMRectReadOnly オブジェクトです。これは、上記の 2 つのプロパティよりも対応されていますが、リサイズオブザーバー API の以前の実装から残ったものであり、ウェブの互換性のために仕様に含まれているため、将来のバージョンで非推奨となる可能性があることに注意してください。

ResizeObserverEntry.target 読取専用

監視対象の Element または SVGElement オブジェクト。

なし。

以下のスニペットは resize-observer-text.html （ソースを参照）の例から取ったものです。これは、ブラウザーが新しい contentBoxSize プロパティに対応しているかどうかを確認するための簡単な機能検出テストを使用します。もし対応していれば、それを使って必要なサイズデータを取得します。対応していない場合は、古い 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);