Méthodes outerWidth et outerHeight dans jQuery

La dernière paire de méthodes - outerWidth et outerHeight, avec lesquelles il est possible d'obtenir la largeur et la hauteur d'un élément en prenant en compte toutes les marges intérieures et les bordures, et il est possible de ne pas prendre en compte les marges extérieures margin.

Prenons un exemple. Supposons que nous ayons un paragraphe :

<p id="test">text</p>
<p id="out"></p>

Le CSS ressemble à ceci :

p {
	margin: 10px;
	padding: 5px;
	border: 2px solid blue;
}

Obtenons les valeurs de largeur et de hauteur du paragraphe #test, en tenant compte des marges intérieures et des bordures, pour cela, il faut passer false à ces méthodes ou laisser les parenthèses vides (car c'est la valeur par défaut de la méthode) :

let w = $('#test').outerWidth(false);
let h = $('#test').outerHeight();
$('#out').text('Width: ' + w + ' Height: ' + h);

Maintenant, nos valeurs différeront encore de 4px, puisque l'épaisseur des bordures est de 2px de chaque côté.

Et maintenant, obtenons les valeurs de largeur et de hauteur du paragraphe #test, en tenant compte de toutes les marges et bordures, pour cela, il faut passer true aux méthodes outerWidth et outerHeight :

let w = $('#test').outerWidth(true);
let h = $('#test').outerHeight(true);
$('#out').text('Width: ' + w + ' Height: ' + h);

Maintenant, nos valeurs différeront des précédentes encore de 20px, puisque les marges extérieures sont de 10px de chaque côté.

Complétez la solution des tâches précédentes - affichez dans le troisième paragraphe sous la div #wrapper les valeurs de largeur et de hauteur de la div #wrapper - en tenant compte des marges intérieures et des bordures, mais sans les marges extérieures. Dans le quatrième paragraphe, affichez les valeurs de largeur et de hauteur de la div #wrapper en tenant compte de toutes les marges et bordures.

Aussi, avec les méthodes outerWidth et outerHeight nous pouvons modifier les valeurs de largeur et de hauteur des éléments. Par exemple, définissons la largeur de la div #test1 à 250px, et la hauteur de #test2 à 200px :

$('#test1').outerWidth(250, true);
$('#test2').outerHeight(200);

Toutes les méthodes spécifiées pour travailler avec les dimensions d'un élément prévoient également la possibilité d'appliquer une fonction à chaque élément de l'ensemble.