Metode width dan height di jQuery

Metode width dan height mendapatkan, secara berurutan, lebar dan tinggi konten elemen tanpa memperhitungkan padding, border dan margin.

Mari kita dapatkan nilai lebar dan tinggi paragraf #test dan tampilkan di paragraf lain. Sebagai contoh, ambil kode HTML berikut:

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

Gaya CSS untuk paragraf terlihat seperti ini:

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

Sekarang tulis kode Javascript:

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

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

$('#test1').width(250);
$('#test2').height(200);

Kami memiliki markup berikut:

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

Berikut gaya CSS:

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

Dapatkan dan tampilkan nilai lebar dan tinggi div #wrapper tanpa memperhitungkan margin dan border. Tampilkan nilainya di paragraf pertama di bawah div ini.