Njia za width na height katika jQuery

Njia width na height hupata, mtawalia, upana na urefu wa maudhui ya kipengele bila kuzingatia padding, border na margin.

Wacha tupate maadili ya upana na urefu wa aya #test na tuyaonyeshe kwenye aya nyingine. Tuchukue, kwa mfano msingi wa HTML ufuatao:

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

Mtindo wa CSS wa aya unaonekana hivi:

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

Sasa tuandike msimbo wa Javascript:

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

Pia kwa urahisi kwa kutumia njia hizi tunaweza kubadilisha maadili ya upana na urefu wa vipele. Kwa mfano, wacha tuweke upana wa div #test1 kuwa sawa na 250px, na urefu wa #test2 - 200px:

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

Tuna mtindo wa uandishi kama huu:

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

Mitoa ifuatayo ya CSS:

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

Pata na uonyeshe maadili ya upana na urefu wa div #wrapper bila kuzingatia vipingamano na mipaka. Maadili yonyeshe kwenye aya ya kwanza chini ya div hii.