ResizeObserver: observe() メソッド

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2020.

observe() は ResizeObserver インターフェイスのメソッドで、指定された Element または SVGElement の監視を開始します。

構文

observe(target)
observe(target, options)

引数

target

監視する Element または SVGElement への参照。

options 省略可

監視のオプションを設定することができるオプションオブジェクトです。現在、設定可能なオプションは 1 つだけです。

box

オブザーバーがどのボックスモデルの変更を観察するかを設定します。設定可能な値は以下の通りです。

content-box (既定値): CSS　で定義されたコンテンツ領域のサイズ。
border-box: CSS で定義されたボックス境界領域のサイズ。
device-pixel-content-box: CSS で定義されたコンテンツ領域の大きさ。デバイスピクセル単位で、要素またはその祖先に対して CSS 変換を適用する前の値。

返値

なし (undefined)。

例外

なし。

例

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

const resizeObserver = new ResizeObserver((entries) => {
  for (const entry of entries) {
    if (entry.contentBoxSize) {
      // クロームが標準外の配列を使用しているかどうかのチェック
      if (entry.contentBoxSize[0]) {
        h1Elem.style.fontSize = `${Math.max(
          1.5,
          entry.contentBoxSize[0].inlineSize / 200,
        )}rem`;
        pElem.style.fontSize = `${Math.max(
          1,
          entry.contentBoxSize[0].inlineSize / 600,
        )}rem`;
      } else {
        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`;
    }
  }
  console.log("サイズが変更されました");
});

resizeObserver.observe(divElem);

オプションオブジェクトを使った observe() の呼び出しは、次のようになります。

resizeObserver.observe(divElem, { box: "border-box" });

仕様書

Specification
Resize Observer # dom-resizeobserver-observe

ブラウザーの互換性

BCD tables only load in the browser