Element.clientLeft — Eigenschaft · JavaScript-Referenz

Signatur

Element.clientLeft

Beschreibung

Die schreibgeschützte Eigenschaft clientLeft liefert den Abstand zwischen der äußeren linken Kante eines Elements (Border-Box) und der linken Kante seines Innenabstands (Padding-Box). In den allermeisten Fällen entspricht das genau der Breite von border-left. Außenabstand (margin) und Innenabstand (padding) zählen nicht dazu.

Einen Sonderfall gibt es: Steht die vertikale Scrollleiste links, etwa bei direction: rtl mit overflow: auto oder scroll, rechnet clientLeft die Breite der Scrollleiste mit ein. Dann ist der Wert größer als der reine Rahmen.

Gebraucht wird clientLeft vor allem für genaue Positionsrechnungen. Beispiele sind Mausposition relativ zum Inhaltsbereich, Drag-and-drop in einem Container mit Rahmen oder das exakte Platzieren von Overlays. Zusammen mit clientTop, clientWidth und clientHeight beschreibt die Eigenschaft die Client-Box eines Elements.

Bei Inline-Elementen und bei Elementen ohne CSS-Layoutbox (z. B. display: none) ist der Wert immer 0.

Rückgabewert

Typ

number

Beschreibung

Ganzzahl: Breite des linken Rahmens in CSS-Pixeln, bei links liegender Scrollleiste zuzüglich deren Breite. Bei Inline-Elementen oder Elementen ohne Layoutbox ist der Wert 0.

Beispiele

Linke Rahmenbreite auslesen

const box = document.createElement('div');
box.style.cssText = 'border-left: 12px solid teal; padding: 20px; margin: 30px; width: 200px;';
document.body.append(box);

// Nur der Rahmen zählt, nicht padding oder margin
console.log(box.clientLeft);

12

Mausposition relativ zum Innenbereich (Padding-Box) berechnen

const canvasBox = document.querySelector('#zeichenflaeche');

canvasBox.addEventListener('pointerdown', (event) => {
  const rect = canvasBox.getBoundingClientRect();
  // Rahmen abziehen, damit (0|0) die obere linke Ecke des Innenbereichs ist
  const x = event.clientX - rect.left - canvasBox.clientLeft;
  const y = event.clientY - rect.top - canvasBox.clientTop;
  console.log(`Klick bei x=${Math.round(x)}, y=${Math.round(y)}`);
});

Klick bei x=57, y=103

RTL-Container: Scrollleiste steckt in clientLeft

const list = document.createElement('div');
list.dir = 'rtl';
list.style.cssText = 'border: 2px solid #333; height: 80px; overflow-y: scroll;';
list.textContent = 'Eintrag '.repeat(200);
document.body.append(list);

const borderLeft = parseFloat(getComputedStyle(list).borderLeftWidth);
console.log('Rahmen:', borderLeft);
console.log('clientLeft:', list.clientLeft);
console.log('Scrollleiste links:', list.clientLeft - borderLeft);

Rahmen: 2 clientLeft: 17 Scrollleiste links: 15

Inline-Elemente liefern immer 0

const span = document.createElement('span');
span.style.borderLeft = '10px solid red';
span.textContent = 'Inline';
document.body.append(span);

console.log(span.clientLeft); // 0
span.style.display = 'inline-block';
console.log(span.clientLeft); // 10

0 10

// Wichtig · Fallstricke

Nur ganze Zahlen: clientLeft wird gerundet. Bei Rahmenbreiten mit Nachkommastellen (z. B. 0.5px oder skalierte Werte in em) nehmen Sie parseFloat(getComputedStyle(el).borderLeftWidth), wenn es genau sein muss.
Scrollleiste mitgezählt: Bei direction: rtl oder einer anderen links liegenden Scrollleiste ist der Wert größer als der Rahmen. Wer nur den Rahmen braucht, liest ihn über getComputedStyle aus. Overlay-Scrollleisten (macOS, mobile Browser) belegen keinen Platz und zählen daher nicht mit.
Inline-Elemente: Bei display: inline ist der Wert immer 0, auch wenn ein Rahmen sichtbar ist.
Transformationen: transform: scale() hat keinen Einfluss. Der Wert ist in untransformierten CSS-Pixeln angegeben, im Gegensatz zu getBoundingClientRect().
Performance: Das Lesen der Eigenschaft erzwingt eine synchrone Layout-Berechnung (Reflow). Mischen Sie in Schleifen keine Lese- und Schreibzugriffe auf das DOM, sondern lesen Sie zuerst alle Werte und schreiben Sie danach.
Schreibgeschützt: Zuweisungen werden stillschweigend ignoriert (im Strict Mode: TypeError).
Die Eigenschaft wird von allen gängigen Browsern seit Langem unterstützt.

Siehe auch

Element.clientTop Element.clientWidth Element.clientHeight HTMLElement.offsetLeft Element.scrollLeft Element.getBoundingClientRect() Window.getComputedStyle()