W3cubDocs

/Web APIs

ResizeObserver: observe() method

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⁩.

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

Syntax

observe(target)
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): Size of the content area as defined in CSS.
border-box: Size of the box border area as defined in CSS.
device-pixel-content-box: The size of the content area as defined in CSS, in device pixels, before applying any CSS transforms on the element or its ancestors.

Return value

None (undefined).

Exceptions

None.

Examples

The following snippet is taken from the resize-observer-text.html (see source) example:

const resizeObserver = new ResizeObserver((entries) => {
  for (const 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
Resize Observer> # dom-resizeobserver-observe>

Browser compatibility

	Desktop					Mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet	WebView Android	WebView on iOS
`observe`	64	79	69	51	13.1	64	79	47	13.4	9.0	64	13.4
`options_box_parameter`	84	84	69 Before version 93, the `device-pixel-content-box` value is not supported.	70	15.4	84	79 Before version 93, the `device-pixel-content-box` value is not supported.	60	15.4	14.0	84	15.4

© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver/observe