DOMRectReadOnly.right — Eigenschaft · JavaScript-Referenz

Signatur

DOMRectReadOnly.right

Beschreibung

Die schreibgeschützte Eigenschaft right gibt die x-Koordinate der rechten Kante eines DOMRectReadOnly (und damit auch eines DOMRect) zurück. Der Wert wird nicht gespeichert. Er wird bei jedem Zugriff neu berechnet, und zwar als Math.max(x, x + width). Deshalb liefert right auch bei negativer Breite immer die Kante, die weiter rechts liegt.

In der Praxis begegnet einem right meist über Element.getBoundingClientRect(), Range.getBoundingClientRect() oder IntersectionObserverEntry.boundingClientRect. Die Werte gelten relativ zum Viewport, also zum sichtbaren Bereich des Browserfensters, und werden in CSS-Pixeln angegeben. Sie sind Gleitkommazahlen und können deshalb auch Bruchteile von Pixeln enthalten.

Typische Einsatzfälle sind Kollisions- und Überlaufprüfungen, zum Beispiel ob ein Tooltip rechts aus dem Fenster ragt, außerdem die Positionierung von Popovers und Berechnungen für Drag-and-Drop.

Rückgabewert

Typ

number

Beschreibung

Die x-Koordinate der rechten Kante in CSS-Pixeln (Gleitkommazahl), also Math.max(x, x + width).

Beispiele

Rechte Kante eines Elements ermitteln

const box = document.createElement('div');
box.style.cssText = 'position:absolute;left:100px;top:0;width:250px;height:50px;';
document.body.append(box);

const rect = box.getBoundingClientRect();
console.log(rect.left, rect.width, rect.right);

100 250 350

Negative Breite: right bleibt die rechte Kante

const rect = new DOMRectReadOnly(200, 0, -80, 40);
console.log(rect.x);      // 200
console.log(rect.left);   // 120
console.log(rect.right);  // 200

200 120 200

Prüfen, ob ein Tooltip rechts aus dem Viewport ragt

const positionTooltip = (tooltip, anchor) => {
  const anchorRect = anchor.getBoundingClientRect();
  tooltip.style.left = `${anchorRect.left}px`;
  tooltip.style.top = `${anchorRect.bottom + 8}px`;

  const tipRect = tooltip.getBoundingClientRect();
  const overflow = tipRect.right - document.documentElement.clientWidth;
  if (overflow > 0) {
    // Tooltip um den Überstand nach links verschieben
    tooltip.style.left = `${anchorRect.left - overflow - 8}px`;
  }
};

Einsatz im IntersectionObserver

const observer = new IntersectionObserver((entries) => {
  for (const entry of entries) {
    const { right } = entry.boundingClientRect;
    const rootRight = entry.rootBounds?.right ?? window.innerWidth;
    if (right > rootRight) {
      console.log(`${entry.target.id} ragt rechts heraus`);
    }
  }
});

document.querySelectorAll('.card').forEach((el) => observer.observe(el));

// Wichtig · Fallstricke

Schreibgeschützt: right lässt sich weder bei DOMRectReadOnly noch bei DOMRect setzen. Wer ein Rechteck verändern möchte, ändert bei DOMRect stattdessen x oder width. Eine Zuweisung an right wird im Nicht-Strict-Modus stillschweigend ignoriert und löst im Strict-Modus einen TypeError aus.
Nicht mit CSS right verwechseln: Die CSS-Eigenschaft right misst den Abstand von der rechten Kante des umgebenden Blocks. DOMRect.right ist dagegen eine absolute x-Koordinate, gemessen vom linken Rand des Viewports.
Viewport-relativ: Werte aus getBoundingClientRect() ändern sich beim Scrollen. Für Dokument-Koordinaten muss man window.scrollX addieren.
Transformationen: Bei CSS-Transforms wie rotate oder scale beschreibt das Rechteck die achsenparallele Hülle um das transformierte Element, nicht dessen eigentliche Kanten.
Performance: Wer getBoundingClientRect() aufruft, um an right zu kommen, erzwingt unter Umständen eine Layout-Neuberechnung (Reflow). Deshalb Lese- und Schreibzugriffe auf das Layout bündeln, etwa mit requestAnimationFrame.
Kompatibilität: Wird von allen modernen Browsern unterstützt. Ältere Browser liefern ein ClientRect, das ebenfalls right hat. Der Konstruktor new DOMRectReadOnly() fehlt aber im Internet Explorer.

Siehe auch

DOMRectReadOnly DOMRectReadOnly.left DOMRectReadOnly.width DOMRectReadOnly.x DOMRectReadOnly.bottom Element.getBoundingClientRect() DOMRect