ResizeObserverEntry

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.

* Some parts of this feature may have varying levels of support.

Das ResizeObserverEntry Interface repräsentiert das Objekt, das an die Callback-Funktion des Konstruktors ResizeObserver() übergeben wird. Es ermöglicht Ihnen, auf die neuen Dimensionen des beobachteten Element oder SVGElement zuzugreifen.

Instanz-Eigenschaften

ResizeObserverEntry.borderBoxSize Schreibgeschützt

Ein Array von Objekten, das die neue Größe des Randrahmens des beobachteten Elements enthält, wenn der Callback ausgeführt wird.

ResizeObserverEntry.contentBoxSize Schreibgeschützt

Ein Array von Objekten, das die neue Größe des Inhaltsrahmens des beobachteten Elements enthält, wenn der Callback ausgeführt wird.

ResizeObserverEntry.devicePixelContentBoxSize Schreibgeschützt

Ein Array von Objekten, das die neue Größe des Inhaltsrahmens in Gerätepixeln des beobachteten Elements enthält, wenn der Callback ausgeführt wird.

ResizeObserverEntry.contentRect Schreibgeschützt

Ein DOMRectReadOnly Objekt, das die neue Größe des beobachteten Elements enthält, wenn der Callback ausgeführt wird. Beachten Sie, dass dies nun eine veraltete Eigenschaft ist, die aus Gründen der Rückwärtskompatibilität in der Spezifikation beibehalten wird.

ResizeObserverEntry.target Schreibgeschützt

Ein Verweis auf das beobachtete Element oder SVGElement.

Hinweis: Der Inhaltsrahmen ist der Bereich, in dem Inhalte platziert werden können, d.h. der Randrahmen abzüglich der Polsterung und der Randbreite. Der Randrahmen umfasst den Inhalt, die Polsterung und den Rand. Siehe Das Boxmodell für eine weitere Erklärung.

Instanz-Methoden

Keine.

Beispiele

Der folgende Codeausschnitt stammt aus dem Beispiel resize-observer-text.html (siehe Quellcode).

Beachten Sie, dass der Code drei unterschiedliche Kompatibilitätsfälle abdeckt:

  • Einige ältere Browser könnten contentRect unterstützen, aber nicht contentBoxSize.
  • Alte Versionen von Firefox unterstützen contentBoxSize, haben es aber fälschlicherweise als einzelnes Objekt und nicht als Array implementiert.
  • Moderne Browser unterstützen contentBoxSize als ein Array von Objekten, um die Meldung von Boxgrößen für fragmentierte Elemente zu ermöglichen (zum Beispiel in einem Mehrspaltenszenario).
js
const resizeObserver = new ResizeObserver((entries) => {
  for (const entry of entries) {
    if (entry.contentBoxSize) {
      // The standard makes contentBoxSize an 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 {
        // … but old versions of Firefox treat it as a single item
        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

Specification
Resize Observer
# resize-observer-entry-interface

Browser-Kompatibilität