ResizeObserver.unobserve()

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

構文

js

unobserve(target)

引数

target

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

返値

なし (undefined)。

例外

なし。

例

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

js

const resizeObserver = new ResizeObserver(entries => {
  for (let 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('Size changed');
});

resizeObserver.observe(divElem);

checkbox.addEventListener('change', () => {
  if(checkbox.checked) {
    resizeObserver.observe(divElem);
  } else {
    resizeObserver.unobserve(divElem);
  }
});

仕様書

Specification
Resize Observer
# dom-resizeobserver-unobserve

ブラウザーの互換性

BCD tables only load in the browser