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

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:

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:

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

Spezifikationen

Specification
Resize Observer # dom-resizeobserver-observe

Browser-Kompatibilität

BCD tables only load in the browser