ResizeObserverEntry

ResizeObserverEntry.borderBoxSize Nur lesbar

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 Nur lesbar

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

ResizeObserverEntry.devicePixelContentBoxSize Nur lesbar

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

ResizeObserverEntry.contentRect Nur lesbar

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 nur aus Gründen der Rückwärtskompatibilität in der Spezifikation belassen wurde.

ResizeObserverEntry.target Nur lesbar

Ein Verweis auf das beobachtete Element oder SVGElement.

Keine.

Das folgende Snippet wurde aus dem Beispiel resize-observer-text.html (siehe Quelle) entnommen.

Beachteen 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 und nicht als Array implementiert.
• Moderne Browser unterstützen contentBoxSize als Array von Objekten, um Berichterstattung über Boxgrößen für fragmentierte Elemente zu ermöglichen (zum Beispiel in einem Mehrspalten-Szenario).

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);