ResizeObserverEntry: target-Eigenschaft

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2020 browserübergreifend verfügbar.

Die target schreibgeschützte Eigenschaft der ResizeObserverEntry-Schnittstelle gibt eine Referenz auf das Element oder SVGElement zurück, das beobachtet wird.

In diesem Artikel

Wert

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.

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