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 ResizeObserver() Konstruktors übergeben wird. Es ermöglicht Ihnen den Zugriff auf die neuen Dimensionen des beobachteten Element oder SVGElement.

Instanzeigenschaften

ResizeObserverEntry.borderBoxSize Schreibgeschützt

Ein Array von Objekten, das die neue Größe des Border-Box 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 Content-Box 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 Content-Box 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 jetzt eine veraltete Eigenschaft ist, die im Standard nur aus Gründen der Rückwärtskompatibilität beibehalten wird.

ResizeObserverEntry.target Schreibgeschützt

Eine Referenz zu dem beobachteten Element oder SVGElement.

Hinweis: Die Content-Box ist der Bereich, in dem Inhalt platziert werden kann, das bedeutet die Border-Box minus die Polster- und Rahmenbreite. Die Border-Box umfasst den Inhalt, das Padding und den Rahmen. Weitere Erklärungen finden Sie im Box-Modell.

Instanzmethoden

Keine.

Beispiele

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

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

  • Einige alte Browser können contentRect unterstützen, aber nicht contentBoxSize.
  • Alte Versionen von Firefox unterstützen contentBoxSize, haben es jedoch fälschlicherweise als einzelnes Objekt anstelle eines Arrays implementiert.
  • Moderne Browser unterstützen contentBoxSize als ein Array von Objekten, um ihnen zu ermöglichen, Boxgrößen für fragmentierte Elemente (zum Beispiel in einem Mehrspaltenszenario) zu melden.
js
const resizeObserver = new ResizeObserver((entries) => {
  for (let 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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
ResizeObserverEntry
borderBoxSize
contentBoxSize
contentRect
devicePixelContentBoxSize
target

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
Has more compatibility info.