Derniers tutoriels de développement web
 

HTML DOM clientWidth Propery

<Object Élément

Exemple

Obtenir la hauteur et la largeur d'un <div> élément, y compris les protections:

var elmnt = document.getElementById("myDIV");
var txt = "Height with padding: " + elmnt.clientHeight + "px<br>";
txt += "Width with padding: " + elmnt.clientWidth + "px";

Le résultat de txt sera:

Height with padding: 270px
Width with padding: 420px
Essayez vous - même »

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

Définition et utilisation

La propriété clientWidth retourne la largeur visible d'un élément en pixels, comprenant un rembourrage, mais pas la frontière, la barre de défilement ou de la marge.

La raison pour laquelle le "viewable" mot est spécifié, est parce que si le contenu de l' élément est plus large que la largeur réelle de l'élément, cette propriété ne renverra la largeur 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 clientHeight propriété.

Conseil: Utiliser les offsetHeight et offsetWidth propriétés pour retourner la hauteur visible et la largeur d'un élément, y compris espacement, la bordure et la barre de défilement.

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é
clientWidth Oui Oui Oui Oui Oui

Syntaxe

element .clientWidth

Détails techniques

Valeur de retour: Un nombre, représentant la largeur visible d'un élément en pixels, y compris les protections
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