ResizeObserverSize: inlineSize 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 inlineSize schreibgeschützte Eigenschaft der ResizeObserverSize-Schnittstelle gibt die Länge des Border-Box des beobachteten Elements in der Inline-Dimension zurück. 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 von Schreibmodi sowie Block- und Inline-Dimensionen lesen Sie Umgang mit verschiedenen Textausrichtungen.

Wert

Ein Dezimalwert, der die Inline-Größe in Pixeln darstellt.

Beispiele

In diesem Beispiel geben wir ein Array von Größeninformationen mit ResizeObserverEntry.contentBoxSize zurück. Die inlineSize-Eigenschaft gibt die Inline-Dimensionsgröße des beobachteten Elements zurück.

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

resizeObserver.observe(divElem);

Spezifikationen

Specification
Resize Observer
# dom-resizeobserversize-inlinesize

Browser-Kompatibilität

BCD tables only load in the browser