ResizeObserver: ResizeObserver() Konstruktor

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2020 browserübergreifend verfügbar.

Der ResizeObserver-Konstruktor erstellt ein neues ResizeObserver-Objekt, das verwendet werden kann, um Änderungen am Inhalts- oder Rahmenbereich eines Element oder dem Begrenzungsrahmen eines SVGElement zu melden.

In diesem Artikel

Syntax

new ResizeObserver(callback)

Parameter

callback

Die Funktion, die jedes Mal aufgerufen wird, wenn eine beobachtete Größenänderung auftritt. Die Funktion wird mit zwei Parametern aufgerufen:

entries

Ein Array von ResizeObserverEntry-Objekten, das verwendet werden kann, um auf die neuen Abmessungen des Elements nach jeder Änderung zuzugreifen.

observer

Eine Referenz auf den ResizeObserver selbst, sodass er definitiv von innerhalb des Callbacks zugänglich ist, falls Sie ihn benötigen. Dies könnte beispielsweise verwendet werden, um den Observer automatisch nicht mehr zu beobachten, wenn eine bestimmte Bedingung erreicht wird. Sie können ihn jedoch weglassen, wenn Sie ihn nicht benötigen.

Der Callback folgt im Allgemeinen einem Muster in der Art von:

js
function callback(entries, observer) {
  for (const entry of entries) {
    // Do something to each entry
    // and possibly something to the observer itself
  }
}

Beispiele

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

js
const resizeObserver = new ResizeObserver((entries) => {
  for (const entry of entries) {
    if (entry.contentBoxSize) {
      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 {
        // legacy path
        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);

Spezifikationen

Spezifikation

Resize Observer
# dom-resizeobserver-resizeobserver

Browser-Kompatibilität

JavaScript aktivieren, um diese Browser-Kompatibilitätstabelle anzuzeigen.

Help improve MDN

War diese Übersetzung hilfreich?

Ja Nein

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

Resize Observer API
ResizeObserver
Konstruktor
1. ResizeObserver()
Instanzmethoden
Verwandte Seiten für Resize Observer API
1. ResizeObserverEntry