Signatur
Beschreibung
Die Eigenschaft x gibt die horizontale Koordinate des Ursprungs eines Rechtecks zurück. Der Ursprung ist normalerweise die linke obere Ecke. Bei einer negativen Breite (width < 0) liegt er aber an der rechten Kante. Der Wert ist eine Gleitkommazahl in CSS-Pixeln und kann daher Nachkommastellen haben, z. B. 12.5.
Solche Rechtecke bekommst du meistens von Element.getBoundingClientRect(), Element.getClientRects(), Range.getBoundingClientRect() oder von ResizeObserverEntry.contentRect bzw. IntersectionObserverEntry.boundingClientRect. Bei getBoundingClientRect() bezieht sich x auf den Viewport, also den sichtbaren Bereich. Die Scroll-Position des Dokuments ist darin nicht enthalten.
Auf einem DOMRectReadOnly kannst du x nicht ändern. Die abgeleitete Klasse DOMRect hat dagegen einen Setter. Wenn du x dort änderst, verschieben sich left bzw. right mit, die Breite bleibt gleich.
Rückgabewert
Beispiele
Rechteck direkt erzeugen und x auslesen
const rect = new DOMRectReadOnly(20, 40, 100, 50);
console.log(rect.x); // Ursprung
console.log(rect.left); // min(x, x + width)
// Schreibgeschützt: Zuweisung wird ignoriert (im Strict Mode TypeError)
rect.x = 999;
console.log(rect.x);Position eines Elements relativ zum Dokument berechnen
const button = document.querySelector('button');
const { x, y } = button.getBoundingClientRect();
// x ist relativ zum Viewport, deshalb Scroll-Offset addieren
const pageX = x + window.scrollX;
const pageY = y + window.scrollY;
console.log(`Button liegt bei ${pageX}/${pageY} im Dokument`);Unterschied zwischen x und left bei negativer Breite
const rect = DOMRectReadOnly.fromRect({ x: 200, y: 0, width: -50, height: 30 });
console.log(rect.x); // Ursprung bleibt 200
console.log(rect.left); // kleinerer Wert
console.log(rect.right);Tooltip an der Mausposition relativ zu einem Container platzieren
const container = document.querySelector('#chart');
const tooltip = document.querySelector('#tooltip');
container.addEventListener('mousemove', (event) => {
const box = container.getBoundingClientRect();
const localX = event.clientX - box.x;
tooltip.style.transform = `translateX(${localX}px)`;
tooltip.textContent = `x = ${Math.round(localX)} px`;
});// Wichtig · Fallstricke
xist nicht immer gleichleft:leftist immerMath.min(x, x + width). Die beiden Werte unterscheiden sich also nur bei negativer Breite. Rechtecke ausgetBoundingClientRect()haben nie eine negative Breite. Bei selbst erzeugten Rechtecken kann das aber vorkommen. Nimmleft, wenn du die linke Kante brauchst.- Bezugssystem: Bei
getBoundingClientRect()istxrelativ zum Viewport. Für Koordinaten im Dokument musst duwindow.scrollXaddieren. BeiResizeObserverEntry.contentRectistxdagegen der linke Innenabstand (padding-left) des Elements und keine Position auf der Seite. - Nachkommastellen: Die Werte sind oft keine ganzen Zahlen, etwa durch Zoom, Transformationen oder hochauflösende Bildschirme. Runde erst, wenn du Werte vergleichen oder für die Pixel-Darstellung ausrichten willst.
- Schreibschutz: Eine Zuweisung an
xauf einemDOMRectReadOnlywird ohne Fehlermeldung ignoriert. Im Strict Mode, also auch in ES-Modulen, löst sie einenTypeErroraus. Wenn du ein veränderbares Rechteck brauchst, verwendeDOMRectoderDOMRect.fromRect(rect). - Performance: Ein Aufruf von
getBoundingClientRect()kann ein erzwungenes Layout (Reflow) auslösen. Rufe es in Schleifen nicht abwechselnd mit Stiländerungen auf. - Kompatibilität:
xundygibt es in allen modernen Browsern. Sehr alte Browser wie der Internet Explorer lieferten stattdessenClientRectohnex/y. Dort musst duleft/topverwenden.