ResizeObserverEntry: contentBoxSize Eigenschaft

Ein Array, das Objekte mit der neuen Größe des Inhaltsbereichs des beobachteten Elements enthält. Das Array ist notwendig, um Elemente zu unterstützen, die mehrere Fragmente haben, was in Szenarien mit mehreren Spalten auftritt. Jedes Objekt im Array enthält zwei Eigenschaften:

blockSize

Die Länge des Inhaltsbereichs 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.

inlineSize

Die Länge des Inhaltsbereichs 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.

Der folgende Ausschnitt stammt aus dem Beispiel resize-observer-border-radius.html (Quellcode ansehen). Dieses Beispiel enthält eine grüne Box, deren Größe als Prozentsatz der Ansichtsfenstergröße festgelegt ist. Wenn die Größe des Ansichtsfensters geändert wird, ändern sich die abgerundeten Ecken der Box proportional zur Größe der Box. Wir könnten dies einfach mit border-radius und einem Prozentsatz umsetzen, aber das führt schnell zu unschön aussehenden elliptischen Ecken; diese Lösung liefert Ihnen schöne quadratische Ecken, die mit der Boxgröße skalieren.

const resizeObserver = new ResizeObserver((entries) => {
  for (const entry of entries) {
    if (entry.contentBoxSize) {
      // The standard makes contentBoxSize an array...
      if (entry.contentBoxSize[0]) {
        entry.target.style.borderRadius = `${Math.min(
          100,
          entry.contentBoxSize[0].inlineSize / 10 +
            entry.contentBoxSize[0].blockSize / 10,
        )}px`;
      } else {
        // … but old versions of Firefox treat it as a single item
        entry.target.style.borderRadius = `${Math.min(
          100,
          entry.contentBoxSize.inlineSize / 10 +
            entry.contentBoxSize.blockSize / 10,
        )}px`;
      }
    } else {
      entry.target.style.borderRadius = `${Math.min(
        100,
        entry.contentRect.width / 10 + entry.contentRect.height / 10,
      )}px`;
    }
  }
});

resizeObserver.observe(document.querySelector("div"));