ResizeObserver

The ResizeObserver interface reports changes to the content rectangle of an Element or the bounding box of an SVGElement. The content rectangle is the box in which content can be placed, meaning the border box minus the padding. (See The box model for an explanation of borders and padding.)

ResizeObserver avoids infinite callback loops and cyclic dependencies that would be created by resizing in its own callback function. It does this by only processing elements deeper in the DOM in subsequent frames. Implementations should, if they follow the specification, invoke resize events before paint and after layout.

Constructor

ResizeObserver()

Creates and returns new ResizeObserver object.

Properties

None.

Event handlers

No

Methods

ResizeObserver.disconnect()

Unobserves all observed Element targets.

ResizeObserver.observe()

Initiates observing of a specified Element.

ResizeObserver.unobserve()

Ends the observing of a specified Element.

Examples

The following example changes the radius of a box's border in response to changes in its width.

const resizeObserver = new ResizeObserver(entries => {
  for (let entry of entries) {
    entry.target.style.borderRadius = Math.max(0, 250 - entry.contentRect.width) + 'px';
  }
});
resizeObserver.observe(document.querySelector('.box:nth-child(2)'));

Specifications

Browser compatibility

See also

• The box model
• PerformanceObserver
• MutationObserver
• IntersectionObserver (part of the Intersection Observer API)