ResizeObserverSize

Die ResizeObserverSize-Schnittstelle der Resize Observer API wird von der ResizeObserverEntry-Schnittstelle verwendet, um auf die Boxgrößeneigenschaften des beobachteten Elements zuzugreifen.

Hinweis: Im Mehrspalten-Layout, einem Fragmentkontext, entspricht die von ResizeObserverSize zurückgegebene Größe der Größe der ersten Spalte.

Instanz-Eigenschaften

ResizeObserverSize.blockSize Nur lesbar

Die Länge der Border-Box des beobachteten Elements in der Blockdimension. Für Boxen mit einem horizontalen writing-mode ist dies die vertikale Dimension oder Höhe; wenn der Schreibmodus vertikal ist, ist dies die horizontale Dimension oder Breite.

ResizeObserverSize.inlineSize Nur lesbar

Die Länge der Border-Box des beobachteten Elements in der Inline-Dimension. Für Boxen mit einem horizontalen writing-mode ist dies die horizontale Dimension oder Breite; wenn der Schreibmodus vertikal ist, ist dies die vertikale Dimension oder Höhe.

Hinweis: Für eine ausführlichere Erklärung der Schreibmodi sowie Block- und Inline-Dimensionen lesen Sie Umgang mit verschiedenen Schreibrichtungen.

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.

js
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

BCD tables only load in the browser