Attribut offsetWidth de l'élément DOM HTML

Définition et utilisation

offsetWidth L'attribut retourne la largeur 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.

offsetWidth 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 par rapport au texte principal du document.

Veuillez également consulter :

Attribut offsetHeight

Attribut offsetParent

Attribut offsetTop

Attribut offsetLeft

Attribut clientTop

Attribut clientLeft

Attribut clientWidth

Attribut clientHeight

Exemple

Exemple 1

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

Essayez-le vous-même

Exemple 2

Différence entre clientHeight/clientWidth et offsetHeight/offsetWidth

Sans la 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";

Essayez-le vous-même

Avec la 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";

Essayez-le vous-même

Syntaxe

element.offsetWidth

Valeur de retour

Type Description
Numérique La largeur 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.offsetWidth：

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