ResizeObserverEntry.target

The target read-only property of the ResizeObserverEntry interface returns a reference to the Element or SVGElement that is being observed.

Syntax

var element = ResizeObserverEntry.target;
var svgElement = ResizeObserverEntry.target;

Value

An Element or SVGElement representing the element being observed.

Examples

The following snippet is taken from the resize-observer-border-radius.html (see source) example. This example includes a green box, sized as a percentage of the viewport size. When the viewport size is changed, the box's rounded corners change in proportion to the size of the box. We could just implement this using border-radius with a percentage, but that quickly leads to ugly-looking elliptical corners; this solution gives you nice square corners that scale with the box size.

To grab a reference to the observed element so we can update its border-radius value after each change, we make use of the target property of each entry —  entry.target.style.borderRadius.

const resizeObserver = new ResizeObserver(entries => {
  for (let entry of entries) {
    if(entry.contentBoxSize) {
      entry.target.style.borderRadius = Math.min(100, (entry.contentBoxSize.inlineSize/10) +
                                                      (entry.contentBoxSize.blockSize/10)) + 'px';
    } else {
      entry.target.style.borderRadius = Math.min(100, (entry.contentRect.width/10) +
                                                      (entry.contentRect.height/10)) + 'px';
    }
  }
});

resizeObserver.observe(document.querySelector('div'));

Specifications

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

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
targetChrome Full support 64Edge No support NoFirefox Full support 69IE No support NoOpera Full support YesSafari No support NoWebView Android Full support 64Chrome Android Full support 64Firefox Android No support NoOpera Android Full support YesSafari iOS No support NoSamsung Internet Android Full support 9.0

Legend

Full support  
Full support
No support  
No support