Intereting Posts

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

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

En général, le décalage d'un élément est une mesure qui inclut les bordures des éléments, le remplissage horizontal de l'élément, la barre de défilement verticale de l'élément (si présente, si elle est rendue) et la largeur de l'élément CSS.

Source: https://developer.mozilla.org/fr/DOM/element.offsetWidth


Donc, c'est la largeur de votre élément avec la bordure et le rembourrage inclus. Même chose pour la taille.

offsetWidth renvoie la largeur de l'élément calculé, tandis que el.style.width renvoie la propriété width définie dans element.style par javascript et ne reflète pas les dimensions des éléments réels.

Cela signifie que si vous essayez d'obtenir une largeur de l'élément en accédant à el.style , vous n'obtiendrez 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 largeur réelle de votre élément, y compris le padding et la border si vous utilisez un css box model content-box css box model content-box qui est la valeur par défaut pour le box-sizing . Ainsi, vous pouvez penser à cela comme si vous définissiez la width du contenu de l'élément et que le padding/border s'ajoute à cela ( sample ).

Si vous utilisez le css box model boîte css box model border-box , vous définissez la largeur totale de l'élément, y compris le padding et la border rend la zone de contenu plus petite ( sample ). Donc, dans ce cas, offsetWidth et el.style.width renverraient exactement les mêmes nombres (si el.style.width été précédemment défini par javascript ).