Recommandation de cours :

Propriété clientHeight de l'élément HTML DOM

La propriété retourne la hauteur visible de l'élément, y compris la marge interne, mais pas la bordure, la barre de défilement ou la marge externe, en pixels. Définition et utilisation

La propriété retourne la hauteur visible de l'élément, y compris la marge interne, mais pas la bordure, la barre de défilement ou la marge externe, en pixels. clientHeight

Les propriétés sont en lecture seule.Veuillez également consulter :

Tutoriel sur le modèle de boîte CSS

Veuillez également consulter :

propriété clientWidth

propriété clientTop

propriété clientLeft

propriété offsetHeight

propriété offsetWidth Propriété overflow de CSSPour ajouter une barre de défilement à un élément, utilisez

Exemple

Exemple 1

Avec barre de défilement :
Obtenir la hauteur et la largeur de "myDIV", y compris la marge interne :
let text = "clientHeight: " + element.clientHeight + "px<br>";

text += "offsetWidth: " + element.offsetWidth + "px";

text += "clientWidth: " + element.clientWidth + "px";

Exemple 2 : Différence entre clientHeight/clientWidth et offsetHeight/offsetWidth

Avec barre de défilement :
const element = document.getElementById("myDIV");
let text = "";
text += "clientHeight: " + element.clientHeight + "px<br>";
text += "offsetHeight: " + element.offsetHeight + "px<br>";
text += "clientWidth: " + element.clientWidth + "px<br>";

text += "offsetWidth: " + element.offsetWidth + "px";

Sans barre de défilement :

Avec barre de défilement :
const element = document.getElementById("myDIV");
let text = "";
text += "clientHeight: " + element.clientHeight + "px<br>";
text += "offsetHeight: " + element.offsetHeight + "px<br>";
text += "clientWidth: " + element.clientWidth + "px<br>";

text += "offsetWidth: " + element.offsetWidth + "px";

Essayez-le vous-même

Syntaxeelement

.clientHeight

Valeur de retour Type
Description Numérique

Support du navigateur

Tous les navigateurs le supportent element.clientHeight

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Support Support Support Support Support Support