Propriété HTML DOM offsetHeight
Exemple
Obtenez la hauteur et la largeur d'un élément <div>, y compris le rembourrage et la bordure :
var elmnt = document.getElementById("myDIV");
var txt = "Height with padding and border: " + elmnt.offsetHeight + "px<br>";
txt += "Width with padding and border: " + elmnt.offsetWidth + "px";
Plus d'exemples "Essayez-le vous-même" ci-dessous.
Définition et utilisation
La propriété offsetHeight renvoie la hauteur visible d'un élément en pixels, y compris le remplissage, la bordure et la barre de défilement, mais pas la marge.
La raison pour laquelle le mot "visible" est spécifié est que si le contenu de l'élément est plus grand que la hauteur réelle de l'élément, cette propriété renverra uniquement la hauteur visible (voir "Plus d'exemples").
Remarque : Pour comprendre cette propriété, vous devez comprendre le CSS Box Model .
Astuce : Cette propriété est souvent utilisée avec la propriété offsetWidth .
Astuce : Utilisez les propriétés clientHeight et clientWidth pour renvoyer la hauteur et la largeur visibles d'un élément, en incluant uniquement le rembourrage.
Astuce : Pour ajouter des barres de défilement à un élément, utilisez la propriété CSS overflow .
Cette propriété est en lecture seule.
Prise en charge du navigateur
Property | |||||
---|---|---|---|---|---|
offsetHeight | Yes | Yes | Yes | Yes | Yes |
Syntaxe
element.offsetHeight
Détails techniques
Valeur de retour : | Un nombre, représentant la hauteur visible d'un élément en pixels, y compris le rembourrage, la bordure et la barre de défilement |
---|
Plus d'exemples
Exemple
Cet exemple montre la différence entre clientHeight/clientWidth et offsetHeight/offsetWidth :
var elmnt = document.getElementById("myDIV");
var txt = "";
txt += "Height with padding: " + elmnt.clientHeight + "px<br>";
txt += "Height with padding and border: " + elmnt.offsetHeight + "px<br>";
txt += "Width with padding: " + elmnt.clientWidth + "px<br>";
txt += "Width with padding and border: " + elmnt.offsetWidth + "px";
Exemple
Cet exemple montre la différence entre clientHeight/clientWidth et offsetHeight/offsetWidth, lorsque nous ajoutons une barre de défilement à l'élément :
var elmnt = document.getElementById("myDIV");
var txt = "";
txt += "Height with padding: " + elmnt.clientHeight + "px<br>";
txt += "Height with padding, border and scrollbar: " + elmnt.offsetHeight + "px<br>";
txt += "Width with padding: " + elmnt.clientWidth + "px<br>";
txt += "Width with padding, border and scrollbar: " + elmnt.offsetWidth + "px";