Metode innerWidth dan innerHeight di jQuery

Dengan menggunakan metode innerWidth dan innerHeight kita mendapatkan lebar dan tinggi elemen, tetapi sudah dengan memperhitungkan tidak hanya konten, tetapi juga jarak dalam - padding.

Mari kita dapatkan nilai lebar dan tinggi paragraf #test, tetapi kali ini dengan menggunakan innerWidth dan innerHeight, dan tampilkan di paragraf lain. Misalkan kita memiliki dua paragraf:

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

CSS terlihat seperti ini:

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

Di Javascript kita tulis kode berikut:

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

Seperti yang Anda lihat, nilainya sudah berbeda sebesar 10px, karena memperhitungkan jarak dalam, yang dalam kasus kita adalah 5px di semua sisi.

Juga, dengan mudah menggunakan metode innerWidth dan innerHeight kita dapat mengubah nilai lebar dan tinggi elemen. Misalnya, mari kita setel lebar div #test1 menjadi 250px, dan tinggi #test2 - 200px:

$('#test1').innerWidth(250);
$('#test2').innerHeight(200);

Lengkapi solusi untuk tugas pertama - tampilkan di paragraf kedua di bawah div #wrapper nilai lebar dan tinggi div #wrapper, kali ini dengan memperhitungkan jarak dalam, tetapi tanpa memperhitungkan batas dan jarak luar.