Méthodes innerWidth et innerHeight dans jQuery

Avec les méthodes innerWidth et innerHeight, nous obtenons la largeur et la hauteur des éléments, mais cette fois en prenant en compte non seulement le contenu, mais aussi les marges intérieures - padding.

Obtenons les valeurs de largeur et de hauteur du paragraphe #test, mais cette fois en utilisant innerWidth et innerHeight, et affichons-les dans un autre paragraphe. Supposons que nous ayons deux paragraphes :

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

Le CSS ressemble à ceci :

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

En Javascript, nous écrivons le code suivant :

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

Comme vous pouvez le voir, les valeurs diffèrent déjà de 10px, car les marges intérieures sont prises en compte, lesquelles dans notre cas sont de 5px sur tous les côtés.

Nous pouvons aussi simplement, à l'aide des méthodes innerWidth et innerHeight, 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').innerWidth(250);
$('#test2').innerHeight(200);

Complétez la solution de la première tâche - affichez dans le deuxième paragraphe sous la div #wrapper les valeurs de largeur et de hauteur de la div #wrapper, cette fois en tenant compte des marges intérieures, mais sans prendre en compte les bordures et les marges extérieures.