ResizeObserver: observe() Methode
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.
Die observe() Methode des ResizeObserver-Interfaces beginnt mit der Beobachtung des angegebenen Element oder SVGElement.
Syntax
observe(target)
observe(target, options)
Parameter
target-
Ein Verweis auf ein
ElementoderSVGElement, das beobachtet werden soll. optionsOptional-
Ein Optionsobjekt, das es Ihnen ermöglicht, Optionen für die Beobachtung festzulegen. Derzeit gibt es nur eine mögliche Option, die festgelegt werden kann:
box-
Legt fest, welches Boxmodell der Observer beobachten wird. Mögliche Werte sind:
content-box(der Standardwert)-
Größe des Inhaltsbereichs, wie in CSS definiert.
border-box-
Größe des Randbereichs der Box, wie in CSS definiert.
device-pixel-content-box-
Die Größe des Inhaltsbereichs, wie in CSS definiert, gemessen in Gerätepixeln, bevor CSS-Transformationen auf das Element oder seine Vorfahren angewendet werden.
Rückgabewert
Keiner (undefined).
Ausnahmen
Keine.
Beispiele
Das folgende Snippet stammt aus dem Beispiel resize-observer-text.html (siehe Quelle):
const resizeObserver = new ResizeObserver((entries) => {
for (const entry of entries) {
if (entry.contentBoxSize) {
// Checking for chrome as using a non-standard 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 {
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);
Ein observe()-Aufruf mit einem Optionsobjekt würde folgendermaßen aussehen:
resizeObserver.observe(divElem, { box: "border-box" });
Spezifikationen
| Spezifikation |
|---|
| Resize Observer # dom-resizeobserver-observe |