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
oderSVGElement
.
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 nichtcontentBoxSize
. - 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.
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 GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
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.