Nuestros voluntarios aún no han traducido este artículo al Español. ¡Únete a nosotros y ayúdanos a traducirlo!
También puedes leer el artículo en English (US).

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

Etiquetas y colaboradores del documento

Colaboradores en esta página: mdnwebdocs-bot, jpmedley
Última actualización por: mdnwebdocs-bot,