ResizeObserverEntry

ResizeObserverEntry インターフェイスは、 ResizeObserver() コンストラクターのコールバック関数に渡されるオブジェクトを表します。これにより、監視対象の Element または SVGElement の新しい寸法にアクセスすることができます。

プロパティ

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

仕様書

Specification
Resize Observer
# resize-observer-entry-interface

ブラウザーの互換性

BCD tables only load in the browser