ResizeObserverEntry.target — Eigenschaft · JavaScript-Referenz

Signatur

ResizeObserverEntry.target

Beschreibung

Die schreibgeschützte Eigenschaft target eines ResizeObserverEntry liefert das DOM-Element, dessen Größe sich geändert hat. Da ein einzelner ResizeObserver beliebig viele Elemente beobachten kann und der Callback ein Array von Einträgen erhält, ist target der Schlüssel, um jeden Eintrag dem richtigen Element zuzuordnen.

Typische Einsatzfälle sind Element-Queries (Klassen je nach Breite einer Komponente setzen), das Neuzeichnen von Diagrammen oder Canvas-Flächen sowie das Nachführen von Tooltips oder Overlays. Über target kann man Datenattribute auslesen, Klassen setzen oder in einer Map/WeakMap komponentenspezifische Zustände nachschlagen.

Der Wert ist dieselbe Objektreferenz, die zuvor an ResizeObserver.prototype.observe() übergeben wurde — ein Vergleich mit === ist daher zuverlässig. Die Eigenschaft ist schreibgeschützt; eine Zuweisung wird ignoriert (im Strict Mode ohne Fehler, da es sich um einen reinen Getter handelt, wird sie ebenfalls stillschweigend verworfen bzw. wirft je nach Kontext einen TypeError).

Rückgabewert

Typ

Element | SVGElement

Beschreibung

Das beobachtete Element, dessen Größenänderung den Eintrag erzeugt hat — identisch mit der an observe() übergebenen Referenz.

Beispiele

Mehrere Elemente mit einem Observer unterscheiden

const boxes = document.querySelectorAll('.card');

const observer = new ResizeObserver((entries) => {
  for (const entry of entries) {
    // target identifiziert das betroffene Element
    const { width } = entry.contentRect;
    entry.target.classList.toggle('card--compact', width < 300);
    console.log(`${entry.target.id}: ${Math.round(width)}px`);
  }
});

boxes.forEach((box) => observer.observe(box));

card-1: 280px card-2: 420px

Komponentenzustand per WeakMap zuordnen

const charts = new WeakMap();

const observer = new ResizeObserver((entries) => {
  for (const entry of entries) {
    const chart = charts.get(entry.target);
    if (!chart) continue;
    const [size] = entry.contentBoxSize;
    chart.resize(size.inlineSize, size.blockSize);
  }
});

const el = document.querySelector('#umsatz-chart');
charts.set(el, {
  resize: (w, h) => console.log(`Chart neu gezeichnet: ${w}x${h}`)
});
observer.observe(el);

Chart neu gezeichnet: 640x320

Beobachtung nach erster Messung beenden

const observer = new ResizeObserver((entries, obs) => {
  for (const entry of entries) {
    console.log('Erste Höhe:', entry.contentRect.height);
    // target direkt an unobserve() übergeben
    obs.unobserve(entry.target);
  }
});

observer.observe(document.querySelector('header'));

Erste Höhe: 72

// Wichtig · Fallstricke

Endlosschleifen vermeiden: Wer im Callback die Größe von entry.target selbst ändert, löst erneut eine Beobachtung aus. Der Browser bricht das mit der Konsolenmeldung „ResizeObserver loop completed with undelivered notifications“ ab. Größenänderungen ggf. per requestAnimationFrame() verschieben.
Bei SVG-Elementen bezieht sich contentRect auf die Bounding-Box; target ist dann ein SVGElement, das z. B. keine offsetWidth besitzt.
Wird ein Element aus dem DOM entfernt, bleibt es beobachtet, bis unobserve(entry.target) oder disconnect() aufgerufen wird — das kann Speicherlecks verursachen, wenn man Referenzen in einer normalen Map hält (besser WeakMap).
Kompatibilität: Unterstützt in Chrome 64+, Firefox 69+, Safari 13.1+ und Edge 79+. Im Internet Explorer nicht verfügbar.

Siehe auch

ResizeObserverEntry.contentRect ResizeObserverEntry.borderBoxSize ResizeObserverEntry.contentBoxSize ResizeObserverEntry.devicePixelContentBoxSize IntersectionObserverEntry.target