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 resize-observer-text.html (see source) example:

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

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

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

Specifications

Specification Status Comment
Resize Observer
The definition of 'observe()' in that specification.
Editor's Draft Initial definition.

Browser compatibility

DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
observeChrome Full support 64Edge Full support 79Firefox Full support 69IE No support NoOpera Full support 51Safari Full support 13.1WebView Android Full support 64Chrome Android Full support 64Firefox Android No support NoOpera Android Full support 47Safari iOS Full support 13.4Samsung Internet Android Full support 9.0

Legend

Full support
Full support
No support
No support