ResizeObserver.observe() - Web APIs 编辑

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

Syntax

resizeObserver.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), and border-box.

Return value

Void.

Exceptions

None.

Examples

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

const resizeObserver = new ResizeObserver(entries => {
  for (let 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

Browser compatibility

BCD tables only load in the browser