Derniers tutoriels de développement web
 

HTML DOM offsetWidth Propery

<Object Élément

Exemple

Obtenez la hauteur et la largeur d'un <div> élément, 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";

Le résultat de txt sera:

Height with padding and border: 280px
Width with padding and border: 430px
Essayez vous - même »

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

Définition et utilisation

La propriété offsetWidth retourne la largeur visible d'un élément en pixels, y compris espacement, la bordure et la barre de défilement, mais pas 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 offsetHeight propriété.

Conseil: Utiliser les clientHeight et clientWidth propriétés pour retourner la hauteur visible et la largeur d'un élément, comprenant seulement le rembourrage.

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

Syntaxe

element .offsetWidth

Détails techniques

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