Question Différence entre style.width et offsetwidth en HTML?


Je remarque que offsetwidth est un nombre légèrement plus grand. De même pour style.height et offsetheight.


20
2017-11-15 07:58


origine


Réponses:


En règle générale, offsetWidth d'un élément est une mesure qui inclut les bordures d'élément, le remplissage horizontal d'élément, la barre de défilement verticale d'élément (si présente, si rendue) et la largeur CSS d'élément.

La source: https://developer.mozilla.org/en/DOM/element.offsetWidth


Donc, c'est la largeur de votre élément avec border et padding inclus. Même chose pour la hauteur.


15
2017-11-15 08:01



offsetWidth renvoie la largeur de l'élément calculé, tout en el.style.width retourne juste la propriété width définie dans element.style par javascript et ne reflète pas les dimensions de l'élément réel.

Cela signifie que si vous essayez d’obtenir une largeur de l’élément en accédant à el.style, vous n'aurez probablement rien (sample), même si la largeur a été définie dans votre CSS. Vous n'obtiendrez le numéro que s'il était défini dans el.style par javascript.

En outre, offsetWidth vous donne une vraie largeur de votre élément, y compris padding et border si tu utilises content-box  css box model qui est la valeur par défaut pour box-sizing. Donc, vous pouvez penser à cela comme vous le définissez width du contenu de l'élément et padding/border aller au-dessus de cela (sample).

Si vous utilisez border-box  css box model, vous définissez la largeur totale de l'élément, y compris padding et border rendre la zone de contenu plus petite (sample). Donc, dans ce cas, offsetWidth et el.style.width retournerait exactement les mêmes numéros (si el.style.width était précédemment défini par javascript).


13
2018-03-10 21:47