Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.
ResizeObserverSize
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit März 2022 browserübergreifend verfügbar.
Die ResizeObserverSize-Schnittstelle der Resize Observer API wird von der ResizeObserverEntry-Schnittstelle verwendet, um auf die Box-Size-Eigenschaften des beobachteten Elements zuzugreifen.
Hinweis:
In einem mehrspaltigen Layout, welches ein fragmentierter Kontext ist, wird die von ResizeObserverSize zurückgegebene Größe die der ersten Spalte sein.
Instanz-Eigenschaften
ResizeObserverSize.blockSizeSchreibgeschützt-
Die Länge der Border-Box des beobachteten Elements in der Block-Dimension. Für Boxen mit einem horizontalen
writing-modeist dies die vertikale Dimension oder Höhe; wenn der Writing-Mode vertikal ist, ist dies die horizontale Dimension oder Breite. ResizeObserverSize.inlineSizeSchreibgeschützt-
Die Länge der Border-Box des beobachteten Elements in der Inline-Dimension. Für Boxen mit einem horizontalen
writing-modeist dies die horizontale Dimension oder Breite; wenn der Writing-Mode vertikal ist, ist dies die vertikale Dimension oder Höhe.
Hinweis: Für eine weitere Erklärung von Writing-Modes sowie Block- und Inline-Dimensionen lesen Sie Umgang mit verschiedenen Textausrichtungen.
Beispiele
In diesem Beispiel gibt die ResizeObserverEntry.contentBoxSize-Eigenschaft ein ResizeObserverSize-Objekt zurück. Dies ist ein Array, das die Größeninformationen für die Content-Box des beobachteten Elements enthält.
const resizeObserver = new ResizeObserver((entries) => {
for (const entry of entries) {
console.log(entry.contentBoxSize[0]); // a ResizeObserverSize
}
});
resizeObserver.observe(divElem);
Spezifikationen
| Spezifikation |
|---|
| Resize Observer # resizeobserversize |
Browser-Kompatibilität
JavaScript aktivieren, um diese Browser-Kompatibilitätstabelle anzuzeigen.