ResizeObserverSize

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 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.blockSize Schreibgeschützt: Die Länge des Begrenzungsrahmens des beobachteten Elements in der Block-Dimension. 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 Schreibgeschützt: Die Länge des Begrenzungsrahmens 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 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

BCD tables only load in the browser