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 der ResizeObserver-Schnittstelle 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 Beobachter beobachten wird. Mögliche Werte sind:

content-box (Standardwert): Größe des Inhaltsbereichs, wie im CSS definiert.
border-box: Größe des Box-Randbereichs, wie im CSS definiert.
device-pixel-content-box: Die Größe des Inhaltsbereichs, wie im CSS definiert, in Gerätepixeln, bevor CSS-Transformationen auf das Element oder dessen Vorfahren angewendet werden.

Rückgabewert

Keiner (undefined).

Ausnahmen

Keine.

Beispiele

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

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 wie folgt aussehen:

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

Spezifikationen

Specification
Resize Observer # dom-resizeobserver-observe

Browser-Kompatibilität

BCD tables only load in the browser