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 Rückruffunktion des Konstruktors ResizeObserver() übergeben wird, wodurch Sie Zugriff auf die neuen Dimensionen des überwachten Element oder SVGElement erhalten.

Instanzeigenschaften

ResizeObserverEntry.borderBoxSize Schreibgeschützt

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

ResizeObserverEntry.contentBoxSize Schreibgeschützt

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

ResizeObserverEntry.devicePixelContentBoxSize Schreibgeschützt

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

ResizeObserverEntry.contentRect Schreibgeschützt

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

ResizeObserverEntry.target Schreibgeschützt

Eine Referenz auf das beobachtete Element oder SVGElement.

Hinweis: Die Inhaltsbox ist die Box, in der Inhalte platziert werden können, das bedeutet die Rahmenbox minus der Polsterung und der Rahmenbreite. Die Rahmenbox umfasst den Inhalt, die Polsterung und den Rahmen. Siehe Das Box-Modell für weitere Erklärungen.

Instanzmethoden

Keine.

Beispiele

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

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

  • Einige alte Browser unterstützen möglicherweise contentRect, aber nicht contentBoxSize.
  • Alte Versionen von Firefox unterstützen contentBoxSize, haben es aber fälschlicherweise als einzelnes Objekt statt als Array implementiert.
  • Moderne Browser unterstützen contentBoxSize als ein Array von Objekten, um die Größen der Boxen für fragmentierte Elemente (zum Beispiel in einem Mehrspaltenszenario) melden zu können.
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