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.
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
| Specification |
|---|
| Resize Observer # resizeobserversize |