Propriété clientWidth de l'élément HTML DOM

Définition et utilisation

clientWidth La propriété retourne la largeur visible de l'élément, y compris les marges intérieures, mais pas la bordure, la barre de défilement ou la marge extérieure, en pixels.

clientWidth Les propriétés sont lecture seule.

Voir également :Tutoriel sur le modèle de boîte CSS

Voir également :

Propriété clientHeight

Propriété clientTop

Propriété clientLeft

Propriété offsetHeight

Propriété offsetWidth

Pour ajouter une barre de défilement à un élément, utilisez Attribut overflow CSS。

Exemple

Exemple 1

Obtenir la hauteur et la largeur de "myDIV", y compris les marges intérieures :

const element = document.getElementById("myDIV");
let text = "clientHeight: " + element.clientHeight + "px<br>";
text += "clientWidth: " + element.clientWidth + "px";

Essayez-le vous-même

Exemple 2

Exemple 2 : la différence entre clientHeight/clientWidth et offsetHeight/offsetWidth

Sans barre de défilement :

const element = document.getElementById("myDIV");
let text = "";
text += "clientHeight: " + element.clientHeight + "px<br>";
text += "offsetHeight: " + element.offsetHeight + "px<br>";
text += "clientWidth: " + element.clientWidth + "px<br>";
text += "offsetWidth: " + element.offsetWidth + "px";

Essayez-le vous-même

Avec barre de défilement :

const element = document.getElementById("myDIV");
let text = "";
text += "clientHeight: " + element.clientHeight + "px<br>";
text += "offsetHeight: " + element.offsetHeight + "px<br>";
text += "clientWidth: " + element.clientWidth + "px<br>";
text += "offsetWidth: " + element.offsetWidth + "px";

Essayez-le vous-même

Syntaxe

element.clientWidth

Valeur de retour

Type Description
Valeur La largeur visible de l'élément (en pixels), y compris les marge intérieure.

Support du navigateur

Tous les navigateurs le supportent element.clientWidth：

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