ClientHeight de l'élément HTML DOM
❮ L'objet élémentExemple
Obtenez la hauteur et la largeur de "myDIV", y compris le rembourrage :
const elmnt = document.getElementById("myDIV");
let text = "Height with padding: " + elmnt.clientHeight + "px<br>";
text += "Width with padding: " + elmnt.clientWidth + "px";
Plus d'exemples ci-dessous.
Définition et utilisation
La clientHeight
propriété renvoie la hauteur visible d'un élément en pixels, y compris le remplissage, mais pas la bordure, la barre de défilement ou la marge.
La clientHeight
propriété est en lecture seule.
Didacticiel:
Voir également:
La propriété clientWidth de l'élément
La propriété offsetHeight de l'élément
La propriété offsetWidth de l'élément
Pour ajouter des barres de défilement à un élément, utilisez la propriété CSS overflow .
Syntaxe
element.clientHeight
Valeur de retour
Taper | La description |
Nombre | La hauteur visible de l'élément (en pixels), y compris le rembourrage |
La différence entre clientHeight/clientWidth et offsetHeight/offsetWidth
Sans barre de défilement :
const elmnt = document.getElementById("myDIV");
let text = "";
text += "Height with padding: " + elmnt.clientHeight + "px<br>";
text += "Height with padding and border: " + elmnt.offsetHeight + "px<br>";
text += "Width with padding: " + elmnt.clientWidth + "px<br>";
text += "Width with padding and border: " + elmnt.offsetWidth + "px";
Avec une barre de défilement :
const elmnt = document.getElementById("myDIV");
let text = "";
text += "Height with padding: " + elmnt.clientHeight + "px<br>";
text += "Height with padding, border and scrollbar: " + elmnt.offsetHeight + "px<br>";
text += "Width with padding: " + elmnt.clientWidth + "px<br>";
text += "Width with padding, border and scrollbar: " + elmnt.offsetWidth + "px";
Prise en charge du navigateur
element.clientHeight
est pris en charge dans tous les navigateurs :
Chrome | IE | Edge | Firefox | Safari | Opera |
Yes | Yes | Yes | Yes | Yes | Yes |
❮ L'objet élément