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:

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

Gaya CSS untuk paragraf terlihat seperti ini:

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

Sekarang tulis kode Javascript:

javascriptlet 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:

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

html<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>

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