Attribut offsetWidth du DOM HTML

Objet Element HTML DOM

offsetWidthPropriété lecture seule qui renvoie la largeur de l'élément sous forme d'entier, y compris les marges horizontales et les bordures.

Généralement, offsetWidth est la mesure en pixels de la largeur CSS de l'élément, y compris toute bordure, marge et barre de défilement verticale (si elle existe). Il ne comprend pas la largeur des éléments pseudo, par exemple:: beforeou:: after.

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

UtilisationclientHeightetclientWidthCette propriété renvoie la hauteur et la largeur visibles de l'élément, y compris les marges et les espaces, mais pas les bordures, les marges et les barres de défilement (si elles existent).

Syntaxe :

element.offsetWidth

var elem = document.querySelector("div");
var txt = "Hauteur incluant la marge et la bordure: "　+　elem.offsetHeight　+　"px<br>";
txt　+"Largeur incluant la marge et la bordure: "　+　elem.offsetWidth　+　"px";

Compatibilité du navigateur

Tous les navigateurs supportent complètement la propriété offsetWidth :

Détails techniques

Plus d'exemples

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

var elem = document.querySelector("div");
var txt = "Width inclus padding: "　+　elem.clientWidth　+　"px<br>";
txt　+= "Width inclus padding"　+　border: ""　+　elem.offsetWidth　+　"px";

Références associées

Référence HTML DOM :propriété offsetHeight

Référence HTML DOM :propriété offsetLeft

Référence HTML DOM :propriété offsetTop

Référence HTML DOM :propriété offsetParent

Objet Element HTML DOM