Kaedah innerWidth dan innerHeight dalam jQuery

Dengan menggunakan kaedah innerWidth dan innerHeight, kita mendapatkan lebar dan tinggi elemen, tetapi sudah termasuk bukan sahaja kandungan, malah padding dalam - padding.

Mari kita dapatkan nilai lebar dan tinggi perenggan #test, tetapi kali ini menggunakan innerWidth dan innerHeight, dan outputkannya dalam perenggan lain. Katakan kita ada dua perenggan:

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

CSS kelihatan seperti ini:

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

Dalam Javascript, tulis kod berikut:

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

Seperti yang anda lihat, nilai sudah berbeza sebanyak 10px, kerana padding dalam diambil kira, yang dalam kes kami ialah 5px pada semua sisi.

Juga, secara mudah dengan kaedah innerWidth dan innerHeight kita boleh menukar nilai lebar dan tinggi elemen. Sebagai contoh, mari kita tetapkan lebar div #test1 kepada 250px, dan tinggi #test2 - 200px:

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

Lengkapkan penyelesaian untuk tugas pertama - outputkan dalam perenggan kedua di bawah div #wrapper nilai lebar dan tinggi div #wrapper, pada kali ini dengan mengambil kira padding dalam, tetapi tanpa mengambil kira sempadan dan margin luar.