DOMRectReadOnly.left — Eigenschaft · JavaScript-Referenz

Signatur

get DOMRectReadOnly.left

Beschreibung

Die schreibgeschützte Eigenschaft left liefert die horizontale Position der linken Kante eines DOMRectReadOnly bzw. DOMRect. Intern wird sie als Math.min(x, x + width) berechnet. Bei einer negativen Breite ist left deshalb nicht gleich x.

Solche Rechtecke bekommen Sie in der Praxis meist über Element.getBoundingClientRect(), Range.getBoundingClientRect(), IntersectionObserverEntry.boundingClientRect oder ResizeObserverEntry.contentRect. Bei getBoundingClientRect() bezieht sich der Wert auf den Viewport, nicht auf das Dokument. Wer eine absolute Position im Dokument braucht, muss window.scrollX addieren.

Mit left positionieren Sie zum Beispiel Tooltips oder Popover, erkennen Kollisionen oder berechnen Abstände zwischen Elementen. Zusammen mit top, right und bottom beschreibt die Eigenschaft die Kanten des Rechtecks unabhängig vom Vorzeichen der Breite und Höhe.

Rückgabewert

Typ

number

Beschreibung

Die x-Koordinate der linken Kante in CSS-Pixeln (Gleitkommazahl). Sie entspricht Math.min(x, x + width).

Beispiele

Linke Kante eines Elements im Viewport auslesen

const box = document.querySelector('#box');
const rect = box.getBoundingClientRect();
console.log(`Linke Kante: ${rect.left}px`);
// Absolute Position im Dokument
console.log(`Im Dokument: ${rect.left + window.scrollX}px`);

Linke Kante: 120px Im Dokument: 120px

Unterschied zwischen x und left bei negativer Breite

const rect = new DOMRectReadOnly(100, 50, -40, 30);
console.log(rect.x);     // Ursprung
console.log(rect.left);  // tatsächliche linke Kante
console.log(rect.right);

100 60 100

Tooltip bündig unter einem Button positionieren

const button = document.querySelector('#hilfe');
const tooltip = document.querySelector('#tooltip');

const positionTooltip = () => {
  const { left, bottom } = button.getBoundingClientRect();
  tooltip.style.position = 'fixed';
  tooltip.style.left = `${left}px`;
  tooltip.style.top = `${bottom + 8}px`;
};

button.addEventListener('mouseenter', positionTooltip);
window.addEventListener('resize', positionTooltip);

Schreibversuch wird ignoriert

'use strict';
const rect = new DOMRectReadOnly(10, 0, 50, 20);
try {
  rect.left = 999;
} catch (err) {
  console.log(err instanceof TypeError);
}
console.log(rect.left);

true 10

// Wichtig · Fallstricke

Viewport-Bezug: Werte aus getBoundingClientRect() ändern sich beim Scrollen. Für Dokument-Koordinaten addieren Sie window.scrollX.
left ist nicht immer x: Bei negativer width unterscheiden sich die beiden Werte. Für Kantenberechnungen ist left die sicherere Wahl.
Schreibschutz: left ist ein reiner Getter, auch bei einem veränderbaren DOMRect. Wenn Sie das Rechteck ändern wollen, setzen Sie x oder width eines DOMRect. Im Strict Mode wirft eine Zuweisung an left einen TypeError, ansonsten wird sie stillschweigend ignoriert.
Transformationen: CSS-transform fließt in getBoundingClientRect() ein. Das Ergebnis ist das umschließende Rechteck des transformierten Elements, nicht seine Layout-Box.
Performance: Wenn Sie Layout-Werte direkt nach DOM-Änderungen auslesen, erzwingen Sie einen synchronen Reflow. Lese- und Schreibzugriffe sollten Sie deshalb bündeln, zum Beispiel mit requestAnimationFrame.
Die Eigenschaft wird von allen modernen Browsern unterstützt. Der Internet Explorer kannte nur ClientRect, das left ebenfalls bereitstellte, aber kein x.

Siehe auch

DOMRectReadOnly DOMRectReadOnly.right DOMRectReadOnly.top DOMRectReadOnly.x Element.getBoundingClientRect() DOMRect NotRestoredReasons.name