ResizeObserverEntry

This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The ResizeObserverEntry interface is the object passed to the callback ResizeObserver() constructor.

Properties

ResizeObserverEntry.contentRect  Read only
A reference to the DOMRectReadOnly of the target of a resized element.
ResizeObserverEntry.target  Read only
A reference to an Element that was resized.

Event handlers

No

Methods

None.

Examples

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

const resizeOserver = 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

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

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Basic support
Experimental
Chrome Full support 64Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android Full support 64Chrome Android Full support 64Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
target
Experimental
Chrome Full support 64Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android Full support 64Chrome Android Full support 64Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
contentRect
Experimental
Chrome Full support 64Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android Full support 64Chrome Android Full support 64Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?

Legend

Full support  
Full support
Compatibility unknown  
Compatibility unknown
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.

Document Tags and Contributors

Contributors to this page: mdnwebdocs-bot, jpmedley
Last updated by: mdnwebdocs-bot,