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

javascriptélément.clientHeight;

Exemple

Trouvons la taille d'un élément :

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

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

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

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

javascript130

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 :

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

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

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

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

javascript114 (dépend du navigateur)

Exemple

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

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

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

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

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

javascript0

Voir aussi