Web/API/ResizeObserver/unobserve

The unobserve() method of the ResizeObserver interface ends the observing of a specified Element or SVGElement.

Syntax

void unobserve(target);

Parameters

target: A reference to an Element or SVGElement to be unobserved.

Return value

Void.

Exceptions

None.

Examples

The following snippet is taken from the [[../../../../../../../mdn.github.io/dom-examples/resize-observer/resize-observer-text|resize-observer-text.html]] (see source) example:

const resizeObserver = new ResizeObserver(entries => {
  for (let entry of entries) {
    if(entry.contentBoxSize) {
      // Checking for chrome as using a non-standard array
      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);
  }
});

Specifications

Specification	Status	Comment
Resize ObserverThe definition of 'unobserve()' in that specification.	Editor's Draft	Initial definition.

Browser compatibility

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`unobserve`	Chrome Full support 64	Edge Full support 79	Firefox Full support 69	IE No support No	Opera Full support 51	Safari Full support 13.1	WebView Android Full support 64	Chrome Android Full support 64	Firefox Android No support No	Opera Android Full support 47	Safari iOS Full support 13.4	Samsung Internet Android Full support 9.0

Legend

Full support: Full support
No support: No support

ResizeObserver.unobserve() by Mozilla Contributors is licensed under CC-BY-SA 2.5.