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

仕様書

ブラウザーの互換性