Quelle est la différence entre la « largeur », la « largeur intérieure » et la « largeur extérieure » de jQuery ?

Distinguer la largeur, la largeur intérieure et la largeur extérieure dans jQuery

Pour élucider les différences entre ces propriétés, examinons leurs définitions et leurs aspects pratiques. mise en œuvre.

Width

• Représente la largeur de l'élément, hors remplissage mais incluant les bordures.
  innerWidth
• Définit la largeur de l'élément, hors remplissage et borders.
  outerWidth
• Englobe la largeur de l'élément, y compris le remplissage et les bordures.

De même, hauteur, innerHeight, et outerHeight opère sur la dimension verticale.

Dans votre exemple donné :

var div = $('.test');

L'élément a une largeur définie de 200 px, une hauteur de 150 px et aucun remplissage ou frontières. Par conséquent, les trois propriétés liées à la largeur (width, innerWidth et outerWidth) renvoient "200px". De même, les trois propriétés liées à la hauteur renvoient "150px".

Cependant, si un remplissage ou des bordures étaient appliqués à l'élément, les résultats varieraient :

<div class="test">

Dans ce scénario :

• largeur serait toujours "200px".
• innerWidth serait "180px" (200px - remplissage de 20px).
• outerWidth serait "220px" (200px 2 × 5px border).

Ces propriétés fournissent un niveau de contrôle granulaire pour travailler avec les dimensions des éléments dans jQuery et s'adapter à divers styles CSS.

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!