Méthodes width et height dans jQuery

Les méthodes width et height obtiennent, respectivement, la largeur et la hauteur du contenu de l'élément sans prendre en compte le padding, la border et la margin.

Obtenons les valeurs de largeur et de hauteur du paragraphe #test et affichons-les dans un autre paragraphe. Prenons, par exemple, le code HTML suivant :

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

Le style CSS du paragraphe ressemble à ceci :

p {
	margin: 10px;
	padding: 5px;
}

Maintenant, écrivons le code Javascript :

let w = $('#test').width();
let h = $('#test').height();
$('#out').text('Width: ' + w + ' Height: ' + h);

Aussi simplement, avec ces méthodes, 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').width(250);
$('#test2').height(200);

Nous avons cette structure :

<div id="wrapper">
<div id="test">text</div>
</div>
<p id="one"></p>
<p id="two"></p>
<p id="three"></p>
<p id="four"></p>

Les styles CSS suivants :

div {
margin: 10px;
padding: 5px;
border: 2px solid green;
}
#wrapper {
border-color: blueviolet;
}

Obtenez et affichez les valeurs de largeur et de hauteur de la div #wrapper sans tenir compte des marges et des bordures. Affichez les valeurs dans le premier paragraphe sous cette div.