Dimensions jQuery : quelle est la différence entre 'width', 'innerWidth', 'outerWidth', 'height', 'innerHeight' et 'outerHeight' ?

jQuery : Comprendre la différence entre width, innerWidth, externalWidth, height, innerHeight et externalHeight

Lorsque vous travaillez avec des dimensions dans jQuery, c'est essentiel pour comprendre les différences subtiles entre width, innerWidth, externalWidth, height, innerHeight et externalHeight. Bien qu'elles puissent sembler interchangeables à première vue, chacune de ces propriétés répond à un objectif précis.

largeur et hauteur

la largeur et la hauteur représentent les dimensions visibles d'un élément, y compris son contenu et son remplissage. Dans votre exemple, ces propriétés renvoient respectivement 200 px et 150 px, car vous avez défini l'élément avec ces dimensions à l'aide de CSS.

innerWidth et innerHeight

innerWidth et innerHeight représentent les dimensions de la zone de contenu d'un élément, à l'exclusion du remplissage. Puisque vous n'avez appliqué aucun remplissage à l'élément dans votre exemple, ces propriétés renvoient également 200px et 150px, donnant les mêmes résultats que width et height.

outerWidth et externalHeight

outerWidth et externalHeight représentent les dimensions totales d'un élément, y compris son contenu, son remplissage et sa bordure. Pour votre élément, ces propriétés n'incluent pas de bordure, elles renvoient donc les mêmes valeurs que la largeur et la hauteur.

Exemples

Pour démontrer davantage les différences, ajoutons un peu de remplissage et de bordure à l'élément dans votre exemple :

.test {
  padding: 20px;
  border: 10px solid red;
}

Maintenant, la largeur et la hauteur de l'élément (y compris le contenu et le remplissage) seraient 240px et 190px, respectivement, innerWidth et innerHeight (zone de contenu uniquement) seraient de 200px et 150px, et externalWidth et externalHeight (dimensions totales incluant la bordure) seraient de 260px et 210px.

Conclusion

Comprendre les différences entre ces propriétés de dimension permet aux développeurs de calculer et positionner avec précision les éléments sur une page Web.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!