Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.
ResizeObserverSize
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since März 2022.
DieResizeObserverSize-Schnittstelle derResize Observer API wird von derResizeObserverEntry-Schnittstelle verwendet, um auf die Box-Size-Eigenschaften des beobachteten Elements zuzugreifen.
Hinweis:In einemmehrspaltigen Layout, welches ein fragmentierter Kontext ist, wird die vonResizeObserverSize zurückgegebene Größe die der ersten Spalte sein.
Instanz-Eigenschaften
ResizeObserverSize.blockSizeSchreibgeschütztDie 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ütztDie 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 SieUmgang mit verschiedenen Textausrichtungen.
Beispiele
In diesem Beispiel gibt dieResizeObserverEntry.contentBoxSize-Eigenschaft einResizeObserverSize-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
| Specification |
|---|
| Resize Observer # resizeobserversize |