Web/API/ResizeObserver/observe

The observe() method of the ResizeObserver interface starts observing the specified Element or SVGElement.

Syntax

resizeObserver.observe(target, options);

Parameters

target: A reference to an Element or SVGElement to be observed.
options Optional: An options object allowing you to set options for the observation. Currently this only has one possible option that can be set:

box Sets which box model the observer will observe changes to. Possible values are content-box (the default), and border-box.

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

An observe() call with an options object would look like so:

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

Specifications

Specification	Status	Comment
Resize ObserverThe definition of 'observe()' 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
`observe`	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.observe() by Mozilla Contributors is licensed under CC-BY-SA 2.5.