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 Schnittstelle ResizeObserverEntry verwendet, um auf die Box-Größeneigenschaften des beobachteten Elements zuzugreifen.
Hinweis:
In einem mehrspaltigen Layout, das einen fragmentierten Kontext darstellt, ist die durch ResizeObserverSize zurückgegebene Größe die Größe der ersten Spalte.
Instanz-Eigenschaften
ResizeObserverSize.blockSizeSchreibgeschützt-
Die Länge des Begrenzungsrahmens des beobachteten Elements in der Block-Dimension. Für Boxen mit einem horizontalen
writing-modeist dies die vertikale Dimension oder Höhe; wenn der Schreibmodus vertikal ist, ist dies die horizontale Dimension oder Breite. ResizeObserverSize.inlineSizeSchreibgeschützt-
Die Länge des Begrenzungsrahmens des beobachteten Elements in der Inline-Dimension. Für Boxen mit einem horizontalen
writing-modeist dies die horizontale Dimension oder Breite; wenn der Schreibmodus vertikal ist, ist dies die vertikale Dimension oder Höhe.
Hinweis: Für mehr Erklärungen zu Schreibmodi sowie Block- und Inline-Dimensionen lesen Sie Umgang mit unterschiedlichen Schreibrichtungen.
Beispiele
In diesem Beispiel gibt die Eigenschaft ResizeObserverEntry.contentBoxSize ein ResizeObserverSize-Objekt zurück. Dies ist ein Array, das die Größeninformationen für die Inhaltsbox 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 |
Browser-Kompatibilität
Loading…