Element.clientWidth — Eigenschaft · JavaScript-Referenz

Signatur

Element.clientWidth

Beschreibung

Element.clientWidth ist eine schreibgeschützte Eigenschaft. Sie gibt die sichtbare innere Breite eines Elements in CSS-Pixeln zurück. Der Wert setzt sich aus der Breite des Inhaltsbereichs und dem linken und rechten padding zusammen. Nicht enthalten sind border, margin und eine eventuell vorhandene vertikale Scrollleiste.

Für Inline-Elemente (z. B. <span> ohne display: block) und für Elemente ohne Layout-Box (etwa bei display: none oder wenn sie nicht im Dokument hängen) ist der Wert 0. Die MDN-Kurzbeschreibung spricht hier von „null“; gemeint ist die Zahl 0, nicht der Wert null. Beim Wurzelelement (document.documentElement) oder bei <body> im Quirks-Modus liefert clientWidth die Breite des Viewports ohne Scrollleiste.

Typische Einsatzfälle sind eigene Layout-Berechnungen, responsive Komponenten, das Erkennen von Überlauf (Vergleich mit scrollWidth) und das Ermitteln der Scrollleisten-Breite (Vergleich mit offsetWidth bzw. window.innerWidth). Für Werte mit Nachkommastellen oder transformierte Elemente eignet sich getBoundingClientRect() besser.

Rückgabewert

Typ

number

Beschreibung

Ganze Zahl (gerundet) mit der inneren Breite in CSS-Pixeln (Inhalt + padding, ohne Rahmen und Scrollleiste). Bei Inline-Elementen und Elementen ohne Layout-Box ist der Wert 0.

Beispiele

Innere Breite eines Containers auslesen

// &lt;div id="box" style="width:200px;padding:10px;border:5px solid;margin:20px"&gt;&lt;/div&gt;
const box = document.getElementById('box');

console.log('clientWidth:', box.clientWidth); // Inhalt + padding
console.log('offsetWidth:', box.offsetWidth); // + border (+ Scrollleiste)

clientWidth: 220 offsetWidth: 230

Viewport-Breite ohne Scrollleiste und Scrollleisten-Breite ermitteln

const viewportWidth = document.documentElement.clientWidth;
const scrollbarWidth = window.innerWidth - viewportWidth;

console.log(`Viewport: ${viewportWidth}px, Scrollleiste: ${scrollbarWidth}px`);

// Nützlich z. B. beim Öffnen eines Modals, damit das Layout nicht springt
document.body.style.paddingRight = `${scrollbarWidth}px`;
document.body.style.overflow = 'hidden';

Viewport: 1905px, Scrollleiste: 15px

Horizontalen Überlauf erkennen (z. B. für abgeschnittenen Text)

const isOverflowing = (el) => el.scrollWidth > el.clientWidth;

document.querySelectorAll('.tabelle-zelle').forEach((cell) => {
  if (isOverflowing(cell)) {
    // vollständigen Text als Tooltip anzeigen
    cell.title = cell.textContent.trim();
  }
});

Auf Größenänderungen reagieren mit ResizeObserver

const card = document.querySelector('.card');

const observer = new ResizeObserver(() => {
  const w = card.clientWidth;
  card.classList.toggle('card--kompakt', w < 400);
  console.log('Neue innere Breite:', w);
});

observer.observe(card);

Neue innere Breite: 612

// Wichtig · Fallstricke

Gerundete Werte: clientWidth gibt immer eine ganze Zahl zurück. Für genaue Werte mit Nachkommastellen getBoundingClientRect().width verwenden. Beachten Sie aber, dass getBoundingClientRect() den Rahmen mitzählt und CSS-Transformationen wie scale() berücksichtigt.
Transformationen werden ignoriert: Ein Element mit transform: scale(2) hat dieselbe clientWidth wie ohne Transformation.
0 statt Fehler: Bei display: none, bei nicht eingehängten Elementen und bei Inline-Elementen ist der Wert 0. Messen Sie daher erst, wenn das Element sichtbar im DOM ist.
Performance: Das Lesen erzwingt eine synchrone Layout-Berechnung (Reflow). Wer in Schleifen abwechselnd Stile schreibt und clientWidth liest, verursacht „Layout Thrashing“. Deshalb zuerst alle Werte lesen und danach schreiben, oder ResizeObserver nutzen.
Schreibgeschützt: Eine Zuweisung wie el.clientWidth = 100 wird still ignoriert (im Strict Mode gibt es einen TypeError). Die Breite ändert man über el.style.width.
Overlay-Scrollleisten: Unter macOS und auf Mobilgeräten belegen Scrollleisten oft keinen Platz. Dann gilt window.innerWidth === document.documentElement.clientWidth.
Wird von allen Browsern unterstützt, auch von sehr alten Versionen.

Siehe auch

Element.clientHeight Element.scrollWidth HTMLElement.offsetWidth Element.clientLeft Element.getBoundingClientRect() Window.innerWidth ResizeObserver