Kaedah width dan height dalam jQuery

Kaedah width dan height mendapatkan, secara berurutan, lebar dan tinggi kandungan elemen tanpa mengambil kira padding, border dan margin.

Mari kita dapatkan nilai lebar dan tinggi perenggan #test dan outputkannya dalam perenggan lain. Sebagai contoh, ambil kod HTML berikut:

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

Gaya CSS untuk perenggan kelihatan seperti ini:

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

Sekarang tulis kod Javascript:

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

Juga, dengan mudah menggunakan kaedah ini kita boleh menukar nilai lebar dan tinggi elemen. Sebagai contoh, mari kita tetapkan lebar div #test1 kepada 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;
}