ResizeObserverEntry

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.

* Einige Teile dieser Funktion werden möglicherweise unterschiedlich gut unterstützt.

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.

In diesem Artikel

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

Spezifikation

Resize Observer
# resize-observer-entry-interface

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
ResizeObserverEntry
Instanzeigenschaften
Verwandte Seiten für Resize Observer API
1. ResizeObserver