Propriété offsetWidth

La propriété offsetWidth contient la largeur totale de l'élément (inclut la largeur propre de l'élément, la largeur des bordures, les espacements internes, les barres de défilement) :

Syntaxe

élément.offsetWidth;

Exemple

Découvrons la taille totale de l'élément :

<div id="elem"></div>

#elem {
	width: 100px;
	height: 100px;
	padding: 15px;
	border: 10px solid black;
}

let elem = document.querySelector('#elem');
console.log(elem.offsetWidth);

Résultat de l'exécution du code :

150

Exemple

Si l'élément est caché, alors offsetWidth est égal à 0 :

<div id="elem"></div>

#elem {
	display: none; /* élément caché */
	width: 100px;
	height: 100px;
	padding: 15px;
	border: 10px solid black;
}

let elem = document.querySelector('#elem');
console.log(elem.offsetWidth);

Résultat de l'exécution du code :

0

Voir aussi

la propriété clientWidth,
qui contient la largeur de l'élément à l'intérieur des bordures
la propriété offsetHeight,
qui contient la hauteur totale de l'élément
la méthode getComputedStyle,
qui obtient la valeur de la propriété CSS de l'élément