ResizeObserver.ResizeObserver()

ResizeObserver コンストラクターは、 Element のコンテンツまたは境界の矩形、または SVGElement のバウンディングボックスに対する変更を監視する新しい ResizeObserver オブジェクトを作成します。

構文

var ResizeObserver = new ResizeObserver(callback)

引数

callback
監視中のものに寸法の変更が発生するたびに呼び出される関数です。関数は2つの引数で呼び出されます。
entries
ResizeObserverEntry オブジェクトの配列で、それぞれの変更の後で要素の新しい寸法にアクセスするために使用することができます。
observer
ResizeObserver 自身への参照で、必要に応じてコールバック内から確実にアクセスできます。これは、たとえば特定の条件に達したときにオブザーバーを自動的に監視解除するために使用できますが、必要ない場合は省略することができます。

コールバックは一般に、次のパターンに従います。

function(entries, observer) {
  for (let entry of entries) {
    // Do something to each entry
    // and possibly something to the observer itself
  }
}

次のスニペットは resize-observer-text.html (ソースを表示) の例から取ったものです。

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
ResizeObserver の定義
編集者草案 初回定義

ブラウザーの互換性

BCD tables only load in the browser