Eigenschaft clientWidth

Die Eigenschaft clientWidth enthält die Breite eines Elements innerhalb seiner Ränder zusammen mit Padding, aber ohne Border und Scrollleiste.

Syntax

element.clientWidth;

Beispiel

Lassen Sie uns die Größe eines Elements ermitteln:

<div id="elem"></div>

#elem {
	width: 100px;
	height: 100px;
	border: 10px solid black;
	padding: 15px;
}

let elem = document.querySelector('#elem');
console.log(elem.clientWidth);

Ergebnis der Codeausführung:

130

Beispiel

Wenn bei einem Element eine Scrollleiste erscheint, verringert sich die Breite des Inhalts um die Breite der Scrollleiste (etwa 16px - abhängig vom Browser, Betriebssystem, Gerät). Im folgenden Beispiel wird die Breite des Elements geringer sein als erwartet:

<div id="elem">Dieses Element hat eine Scrollleiste.</div>

#elem {
	width: 100px;
	height: 100px;
	border: 10px solid black;
	padding: 15px;
	overflow: scroll;
}

let elem = document.querySelector('#elem');
console.log(elem.clientWidth);

Ergebnis der Codeausführung:

114 (abhängig vom Browser)

Beispiel

Wenn ein Element ausgeblendet ist, ist clientWidth gleich 0:

<div id="elem"></div>

#elem {
	display: none; /* ausgeblendetes Element */
	width: 100px;
	height: 100px;
	border: 10px solid black;
	padding: 15px;
}

let elem = document.querySelector('#elem');
console.log(elem.clientWidth);

Ergebnis der Codeausführung:

0

Siehe auch

die Eigenschaft clientHeight,
die die Höhe eines Elements innerhalb seiner Ränder enthält
die Methode getComputedStyle,
die den Wert einer CSS-Eigenschaft eines Elements ermittelt