ResizeObserverEntry
Das ResizeObserverEntry
-Interface stellt das Objekt dar, das an die Callback-Funktion des Konstruktors von ResizeObserver()
übergeben wird. Es ermöglicht Ihnen den Zugriff auf die neuen Dimensionen des beobachteten Element
oder SVGElement
.
Instanzeigenschaften
ResizeObserverEntry.borderBoxSize
Nur lesbar-
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
Nur lesbar-
Ein Array von Objekten, das die neue Größe der Content-Box des beobachteten Elements enthält, wenn der Callback ausgeführt wird.
ResizeObserverEntry.devicePixelContentBoxSize
Nur lesbar-
Ein Array von Objekten, das die neue Größe der Content-Box in Geräte-Pixeln des beobachteten Elements enthält, wenn der Callback ausgeführt wird.
ResizeObserverEntry.contentRect
Nur lesbar-
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 nur aus Gründen der Rückwärtskompatibilität in der Spezifikation belassen wurde. ResizeObserverEntry.target
Nur lesbar-
Ein Verweis auf das beobachtete
Element
oderSVGElement
.
Hinweis: Die Content-Box ist der Bereich, in dem Inhalte platziert werden können, das heißt die Border-Box minus die Padding- und Rahmenbreite. Die Border-Box umfasst den Inhalt, das Padding und den Rahmen. Siehe Das Box-Modell für weitere Erläuterungen.
Instanzmethoden
Keine.
Beispiele
Das folgende Snippet wurde aus dem Beispiel resize-observer-text.html (siehe Quelle) entnommen.
Beachteen Sie, dass der Code drei verschiedene Kompatibilitätsfälle abdeckt:
- Einige alte Browser unterstützen möglicherweise
contentRect
, aber nichtcontentBoxSize
. - Alte Versionen von Firefox unterstützen
contentBoxSize
, haben es jedoch fälschlicherweise als einzelnes Objekt und nicht als Array implementiert. - Moderne Browser unterstützen
contentBoxSize
als Array von Objekten, um Berichterstattung über Boxgrößen für fragmentierte Elemente zu ermöglichen (zum Beispiel in einem Mehrspalten-Szenario).
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
BCD tables only load in the browser