Propriété HTML DOM offsetWidth
Exemple
Obtenez la hauteur et la largeur d'un élément <div>, y compris le rembourrage et la bordure :
var elmnt = document.getElementById("myDIV");
var txt = "Height with padding and border: " + elmnt.offsetHeight + "px<br>";
txt += "Width with padding and border: " + elmnt.offsetWidth + "px";
Plus d'exemples "Essayez-le vous-même" ci-dessous.
Définition et utilisation
La propriété offsetWidth renvoie la largeur visible d'un élément en pixels, y compris le remplissage, la bordure et la barre de défilement, mais pas la marge.
La raison pour laquelle le mot « visualisable » est spécifié est que si le contenu de l'élément est plus large que la largeur réelle de l'élément, cette propriété renverra uniquement la largeur visible (voir « Plus d'exemples »).
Remarque : Pour comprendre cette propriété, vous devez comprendre le CSS Box Model .
Astuce : Cette propriété est souvent utilisée avec la propriété offsetHeight .
Astuce : Utilisez les propriétés clientHeight et clientWidth pour renvoyer la hauteur et la largeur visibles d'un élément, en incluant uniquement le rembourrage.
Astuce : Pour ajouter des barres de défilement à un élément, utilisez la propriété CSS overflow .
Cette propriété est en lecture seule.
Prise en charge du navigateur
| Property | |||||
|---|---|---|---|---|---|
| offsetWidth | Yes | Yes | Yes | Yes | Yes |
Syntaxe
element.offsetWidth
Détails techniques
| Valeur de retour : | Un nombre, représentant la largeur visible d'un élément en pixels, y compris le rembourrage, la bordure et la barre de défilement |
|---|
Plus d'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";
Exemple
Cet exemple montre la différence entre clientHeight/clientWidth et offsetHeight/offsetWidth, lorsque nous ajoutons 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";