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

Propriétés de dimension de jQuery : width, innerWidth, externalWidth, height, innerHeight, externalHeight

La bibliothèque jQuery fournit diverses propriétés pour manipuler et récupérer les dimensions des éléments HTML. Ces propriétés incluent width, innerWidth, externalWidth, height, innerHeight et externalHeight. Comprendre leurs différences est crucial pour un contrôle précis de la taille des éléments.

largeur et hauteur par rapport à innerWidth et innerHeight

Les propriétés width et height représentent les dimensions globales d'un élément. , y compris son contenu et son remplissage, mais à l'exclusion de ses bordures et barres de défilement. innerWidth et innerHeight, en revanche, excluent le remplissage et représentent les dimensions de la zone de contenu au sein de l'élément.

outerWidth et externalHeight

outerWidth et externalHeight englobent tout ce qui se trouve à l'intérieur l'élément, y compris son contenu, son remplissage, ses bordures et ses barres de défilement. Cela vous permet de déterminer avec précision l'espace total qu'un élément occupe sur la page, même avec des marges et des bordures variables.

Exemple

Considérez le code HTML suivant :

<div class="test">
  <p>Hello World!</p>
</div>

.test {
  width: 200px;
  height: 150px;
  padding: 10px;
  border: 1px solid #000;
}

Grâce à jQuery, on peut récupérer les dimensions du ".test" div:

var myDiv = $('.test');
var width = myDiv.width(); // 220px (width + padding + border)
var innerWidth = myDiv.innerWidth(); // 200px (width + padding)
var outerWidth = myDiv.outerWidth(); // 222px (width + padding + border + margin)

var height = myDiv.height(); // 170px (height + padding + border)
var innerHeight = myDiv.innerHeight(); // 150px (height + padding)
var outerHeight = myDiv.outerHeight(); // 172px (height + padding + border + margin)

Comme vous pouvez le voir, les propriétés width, height, innerWidth, innerHeight, externalWidth et externalHeight fournissent différents niveaux de granularité dans la mesure des dimensions des éléments, permettant une flexibilité et un contrôle précis sur la disposition et apparence de vos pages 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!