ResizeObserverEntry

ResizeObserverEntry.borderBoxSize Schreibgeschützt

Ein Array von Objekten, das die neue Größe des Border-Box des beobachteten Elements enthält, wenn der Callback ausgeführt wird.

ResizeObserverEntry.contentBoxSize Schreibgeschützt

Ein Array von Objekten, das die neue Größe des Content-Box des beobachteten Elements enthält, wenn der Callback ausgeführt wird.

ResizeObserverEntry.devicePixelContentBoxSize Schreibgeschützt

Ein Array von Objekten, das die neue Größe des Content-Box in Geräte-Pixeln des beobachteten Elements enthält, wenn der Callback ausgeführt wird.

ResizeObserverEntry.contentRect Schreibgeschützt

Ein DOMRectReadOnly-Objekt, das die neue Größe des beobachteten Elements enthält, wenn der Callback ausgeführt wird. Beachten Sie, dass dies jetzt eine veraltete Eigenschaft ist, die aus Gründen der Rückwärtskompatibilität in der Spezifikation beibehalten wird.

ResizeObserverEntry.target Schreibgeschützt

Eine Referenz auf das beobachtete Element oder SVGElement.

Keine.

Der folgende Ausschnitt stammt aus dem resize-observer-text.html (siehe Quelle) Beispiel.

Beachten Sie, dass der Code drei verschiedene Kompatibilitätsfälle abdeckt:

• Einige alte Browser unterstützen möglicherweise contentRect, aber nicht contentBoxSize.
• Alte Versionen von Firefox unterstützen contentBoxSize, haben es jedoch fälschlicherweise als einzelnes Objekt anstelle eines Arrays implementiert.
• Moderne Browser unterstützen contentBoxSize als ein Array von Objekten, um die Meldung von Box-Größen für fragmentierte Elemente zu ermöglichen (zum Beispiel in einem Mehrspaltenszenario).

const resizeObserver = new ResizeObserver((entries) => {
  for (let entry of entries) {
    if (entry.contentBoxSize) {
      // The standard makes contentBoxSize an array...
      if (entry.contentBoxSize[0]) {
        h1Elem.style.fontSize =
          Math.max(1.5, entry.contentBoxSize[0].inlineSize / 200) + "rem";
        pElem.style.fontSize =
          Math.max(1, entry.contentBoxSize[0].inlineSize / 600) + "rem";
      } else {
        // ...but old versions of Firefox treat it as a single item
        h1Elem.style.fontSize =
          Math.max(1.5, entry.contentBoxSize.inlineSize / 200) + "rem";
        pElem.style.fontSize =
          Math.max(1, entry.contentBoxSize.inlineSize / 600) + "rem";
      }
    } else {
      h1Elem.style.fontSize =
        Math.max(1.5, entry.contentRect.width / 200) + "rem";
      pElem.style.fontSize = Math.max(1, entry.contentRect.width / 600) + "rem";
    }
  }
  console.log("Size changed");
});

resizeObserver.observe(divElem);