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:

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

Gaya CSS untuk perenggan kelihatan seperti ini:

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

Sekarang tulis kod Javascript:

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

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

Kami mempunyai susun atur 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>

Gaya CSS berikut:

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

Dapatkan dan outputkan nilai lebar dan tinggi div #wrapper tanpa mengambil kira margin dan sempadan. Outputkan nilai dalam perenggan pertama di bawah div ini.