ResizeObserverEntry: target-Eigenschaft

Ein Element oder SVGElement, das das beobachtete Element darstellt.

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

Um eine Referenz auf das beobachtete Element zu erhalten, damit wir dessen border-radius-Wert nach jeder Änderung aktualisieren können, verwenden wir die target-Eigenschaft jedes Eintrags — entry.target.style.borderRadius.

const resizeObserver = new ResizeObserver((entries) => {
  for (const entry of entries) {
    if (entry.contentBoxSize) {
      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"));