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:

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

Mtindo wa CSS wa aya unaonekana hivi:

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

Sasa tuandike msimbo wa Javascript:

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

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

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

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