Propriété clientHeight

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

Syntaxe

élément.clientHeight;

Exemple

Trouvons la taille d'un élément :

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

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

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

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, OS, 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: 1px solid black;
	padding: 15px;
	overflow: scroll;
}

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

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

114 (dépend du navigateur)

Exemple

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

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

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

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

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

0

Voir aussi

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