Propriété clientWidth

La propriété clientWidth contient la largeur d'un élément à l'intérieur des bordures avec le padding, mais sans la bordure et le défilement.

Syntaxe

javascriptélément.clientWidth;

Exemple

Trouvons la taille d'un élément :

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

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

javascriptlet elem = document.querySelector('#elem');
console.log(elem.clientWidth);

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

javascript130

Exemple

Si un élément a un défilement, la largeur du contenu diminue de la largeur du défilement (environ 16px - dépend du navigateur, de l'OS, de l'appareil). Dans l'exemple suivant, la largeur de l'élément sera inférieure à celle attendue :

html<div id="elem">Cet élément a un défilement.</div>

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

javascriptlet elem = document.querySelector('#elem');
console.log(elem.clientWidth);

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

javascript114 (dépend du navigateur)

Exemple

Si l'élément est caché, clientWidth sera égal à 0 :

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

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

javascriptlet elem = document.querySelector('#elem');
console.log(elem.clientWidth);

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

javascript0

Voir aussi