Mbinu za innerWidth na innerHeight katika jQuery

Kwa kutumia mbinu innerWidth na innerHeight tunapata upana na urefu wa vipengele, lakini tayari kwa kuzingatia si tu maudhui, bali pia padding ya ndani - padding.

Wacha tupate maadili ya upana na urefu wa aya #test, lakini tayari kwa msaada wa innerWidth na innerHeight, na tuyaonyeshe kwenye aya nyingine. Hebu tuwe na aya mbili:

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

CSS inaonekana kama hii:

p {
margin: 10px;
padding: 5px;
border: 2px solid blue;
}

Katika Javascript tunaandika msimbo ufuatao:

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

Kama unavyoona maadili tayari yanatofautiana kwa 10px, kwa kuwa padding ya ndani inazingatiwa, ambayo kwenye kesi yetu ni 5px kwa kila upande.

Pia kwa urahisi kwa kutumia mbinu innerWidth na innerHeight tunaweza kubadilisha maadili ya upana na urefu wa vipengele. Kwa mfano, wacha tuweke upana wa divi #test1 kuwa sawa na 250px, na urefu wa #test2 - 200px:

$('#test1').innerWidth(250);
$('#test2').innerHeight(200);

Kamua suluhisho la shida ya kwanza - onyesha katika aya ya pili chini ya divi #wrapper maadili ya upana na urefu wa divi #wrapper, wakati huu kwa kuzingatia padding ya ndani, lakini bila kuzingatia mipaka na padding ya nje.