Propriété clientWidth

La propriété clientWidth contient la largeur d'un élément à l'intérieur des bordures avec le padding, mais sans la bordure et le défilement.

Syntaxe

élément.clientWidth;

Exemple

Trouvons la taille d'un élément :

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

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

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

Résultat de l'exécution du code :

130

Exemple

Si un élément a un défilement, la largeur du contenu diminue de la largeur du défilement (environ 16px - dépend du navigateur, de l'OS, de l'appareil). Dans l'exemple suivant, la largeur de l'élément sera inférieure à celle attendue :

<div id="elem">Cet élément a un défilement.</div>

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

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

Résultat de l'exécution du code :

114 (dépend du navigateur)

Exemple

Si l'élément est caché, clientWidth sera égal à 0 :

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

#elem {
	display: none; /* élément caché */
	width: 100px;
	height: 100px;
	border: 10px solid black;
	padding: 15px;
}

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

Résultat de l'exécution du code :

0

Voir aussi

la propriété clientHeight,
qui contient la hauteur d'un élément à l'intérieur des bordures
la méthode getComputedStyle,
qui obtient la valeur de la propriété CSS d'un élément