ResizeObserverSize: blockSize-Eigenschaft

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2020.

Die schreibgeschützte Eigenschaft blockSize der ResizeObserverSize-Schnittstelle gibt die Länge des Rahmenkastens des beobachteten Elements in der Block-Dimension zurück. Bei Kästen 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.

Hinweis: Eine ausführlichere Erklärung zu Schreibmodi und Block- sowie Inline-Dimensionen finden Sie im Artikel Umgang mit unterschiedlichen Textrichtungen.

Wert

Eine Dezimalzahl, die die Blockgröße in Pixeln darstellt.

Beispiele

In diesem Beispiel geben wir ein Array mit Größeninformationen zurück, indem wir ResizeObserverEntry.contentBoxSize verwenden. Die Eigenschaft blockSize gibt die Block-Dimension des beobachteten Elements zurück.

js
const resizeObserver = new ResizeObserver((entries) => {
  for (const entry of entries) {
    const elemSize = entry.contentBoxSize[0];
    console.log(elemSize.blockSize); // a decimal
  }
});

resizeObserver.observe(divElem);

Spezifikationen

Specification
Resize Observer
# dom-resizeobserversize-blocksize

Browser-Kompatibilität

BCD tables only load in the browser