Attribut offsetHeight de l'élément DOM HTML

Définition et utilisation

offsetHeight L'attribut retourne la hauteur visible de l'élément (en pixels), y compris la marge interne, la bordure et la barre de défilement, mais pas la marge externe.

offsetHeight Les attributs sont en lecture seule.

Veuillez également consulter :Tutoriel sur le modèle de boîte CSS

offsetParent

Tous les éléments en bloc signalent les offsets par rapport au parent d'offset :

  • offsetTop
  • offsetLeft
  • offsetWidth
  • offsetHeight

Le parent d'offset fait référence au parent le plus proche ayant une position non statique.

Si le parent d'offset n'existe pas, l'offset est relatif au corps du document.

Veuillez également consulter :

Attribut offsetWidth

Attribut offsetParent

Attribut offsetTop

Attribut offsetLeft

Attribut clientTop

Attribut clientLeft

Attribut clientWidth

Attribut clientHeight

Exemple

Exemple 1

Afficher la hauteur et la largeur de "myDIV", y compris la marge interne et la bordure :

const elmnt = document.getElementById("myDIV");
let text = "Hauteur avec marge et bordure : " + elmnt.offsetHeight + "px<br>";
text += "Largeur avec marge et bordure: " + elmnt.offsetWidth + "px";

Essayer vous-même

Exemple 2

Différence entre clientHeight/clientWidth et offsetHeight/offsetWidth

Avec barre de défilement :

const elmnt = document.getElementById("myDIV");
let text = "";
text += "Hauteur avec marge: " + elmnt.clientHeight + "px<br>";
text += "Hauteur avec marge et bordure: " + elmnt.offsetHeight + "px<br>";
text += "Largeur avec marge: " + elmnt.clientWidth + "px<br>";
text += "Largeur avec marge et bordure: " + elmnt.offsetWidth + "px";

Essayer vous-même

Sans barre de défilement :

const elmnt = document.getElementById("myDIV");
let text = "";
text += "Hauteur avec marge: " + elmnt.clientHeight + "px<br>";
text += "Hauteur avec marge, bordure et barre de défilement: " + elmnt.offsetHeight + "px<br>";
text += "Largeur avec marge: " + elmnt.clientWidth + "px<br>";
text += "Largeur avec marge, bordure et barre de défilement: " + elmnt.offsetWidth + "px";

Essayer vous-même

Syntaxe

element.offsetHeight

Valeur de retour

Type Description
Numéro La hauteur visible de l'élément (en pixels), y compris la marge interne, la bordure et la barre de défilement.

Support du navigateur

Tous les navigateurs le supportent element.offsetHeight：

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