Derniers tutoriels de développement web
 

HTML DOM offsetHeight Propery

<Object Élément

Exemple

Obtenez la hauteur et la largeur d'un <div> élément, 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";

Le résultat de txt sera:

Height with padding and border: 280px
Width with padding and border: 430px
Essayez vous - même »

Plus "Try it Yourself" - "Try it Yourself" exemples ci - dessous.

Définition et utilisation

La propriété offsetHeight retourne la hauteur visible d'un élément en pixels, y compris le rembourrage, la frontière et la barre de défilement, mais pas la marge.

La raison pour laquelle le "viewable" mot est spécifié, est parce que si le contenu de l'élément est plus grand que la hauteur réelle de l'élément, cette propriété ne renverra la hauteur qui est visible (See "More Examples") .

Remarque: Pour comprendre cette propriété, vous devez comprendre le modèle de boîte CSS .

Astuce: Cette propriété est souvent utilisée conjointement avec la offsetWidth propriété.

Conseil: Utiliser les clientHeight et clientWidth propriétés pour retourner la hauteur visible et la largeur d'un élément, comprenant seulement le rembourrage.

Astuce: Pour ajouter des barres de défilement à un élément, utilisez le CSS overflow propriété.

Cette propriété est en lecture seule.

Support du navigateur

Propriété
offsetHeight Oui Oui Oui Oui Oui

Syntaxe

element .offsetHeight

Détails techniques

Valeur de retour: Un nombre, représentant la hauteur visible d'un élément en pixels, y compris espacement, la bordure et la barre de défilement
Exemples

autres 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";

Le résultat de txt sera:

Height with padding: 270px
Height with padding and border: 280px
Width with padding: 420px
Width with padding and border: 430px
Essayez vous - même »

Exemple

Cet exemple montre la différence entre clientHeight / clientWidth et offsetHeight / offsetWidth, quand on ajoute 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";

Le résultat de txt sera:

Height with padding: 249px
Height with padding, border and scrollbar: 280px
Width with padding: 399px
Width with padding, border and scrollbar: 430px
Essayez vous - même »

<Object Élément