Attribut clientWidth du DOM HTML

Objet Element HTML DOM

clientWidthL'attribut lecture seule retourne la largeur visible de l'élément (en pixels), y compris le remplissage, mais sans la bordure, la marge et la barre de défilement verticale (si elle existe).

L'équation de calcul de clientWidth est la suivante : largeur CSS + Remplissage CSS-la largeur de la barre de défilement verticale (si elle existe).

Pour comprendre cette propriété, vous devez comprendreModèle de boîte CSS.

UtilisationoffsetWidthL'attribut peut retourner la largeur visible de l'élément, y compris le remplissage, la bordure et la barre de défilement verticale.

Grammaire :

element.clientWidth

var　elem　=　document.querySelector("div");
var txt = "Hauteur incluant le remplissage : "　+　elem.clientHeight　+　"px<br>";
txt　+=　"Largeur incluant le rembourrage:　"　+　elem.clientWidth　+　"px";

Compatibilité navigateur

Tous les navigateurs prennent en charge pleinement la propriété clientWidth :

Détails techniques

Plus d'exemples

Cet exemple montre la différence entre clientWidth et offsetWidth :

var　elem　=　document.querySelector("div");
var　txt　=　"Largeur incluant le rembourrage:　"　+　elem.clientWidth　+　"px<br>";
txt　+=　"Largeur incluant le rembourrage+Bordure:　"　+　elem.offsetWidth　+　"px";

Références associées

Référence HTML DOM :Propriété offsetWidth HTML DOM

Référence HTML DOM :Propriété scrollWidth HTML DOM

Référence CSS :Propriété overflow CSS

Objet Element HTML DOM