ResizeObserver: observe() Methode

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2020.

Die observe() Methode des ResizeObserver-Interfaces beginnt mit der Beobachtung des angegebenen Element oder SVGElement.

Syntax

js
observe(target)
observe(target, options)

Parameter

target

Eine Referenz zu einem Element oder SVGElement, das beobachtet werden soll.

options Optional

Ein Optionsobjekt, das es Ihnen ermöglicht, Optionen für die Beobachtung festzulegen. Derzeit gibt es nur eine mögliche Option, die festgelegt werden kann:

box

Legt fest, welches Box-Modell der Observer auf Änderungen beobachten wird. Mögliche Werte sind:

content-box (der Standardwert)

Größe des Inhaltsbereichs, wie in CSS definiert.

border-box

Größe des Rahmenbereichs, wie in CSS definiert.

device-pixel-content-box

Die Größe des Inhaltsbereichs, wie in CSS definiert, in Gerätepixeln, bevor CSS-Transformationen auf das Element oder seine Vorfahren angewendet werden.

Rückgabewert

Keiner (undefined).

Ausnahmen

Keine.

Beispiele

Das folgende Code-Snippet stammt aus dem resize-observer-text.html (Quellcode ansehen) Beispiel:

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

Ein observe()-Aufruf mit einem Optionsobjekt würde folgendermaßen aussehen:

js
resizeObserver.observe(divElem, { box: "border-box" });

Spezifikationen

Specification
Resize Observer
# dom-resizeobserver-observe

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
observe
options.box parameter

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.