Njia za outerWidth na outerHeight katika jQuery

Jozi ya mwisho ya njia - outerWidth na outerHeight, ambazo kwa kuzitumia inawezekana kupata upana na urefu wa kipengele kwa kuzingatia vipingamano vyote na mipaka, au inawezekana kutozingatia vipingamano vya nje margin.

Tuchunguze mfano. Hebu tubuni kuwa tuna aya:

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

CSS inaonekana hivi:

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

Wacha tupate maadili ya upana na urefu wa aya #test, kwa kuzingatia vipingamano vya ndani na mipaka, kwa hili ni muhimu kupitisha false kwenye njia hizi au uache mabano yaliyo wazi (kwa sababu tayari imewekwa kwenye njia kama chaguo-msingi):

let w = $('#test').outerWidth(false);
let h = $('#test').outerHeight();
$('#out').text('Upana: ' + w + ' Urefu: ' + h);

Sasa maadili yetu yatakuwa tofauti kwa 4px zaidi, kwa sababu unene wa mipaka ni 2px kwa kila upande.

Sasa wacha tupate maadili ya upana na urefu wa aya #test, kwa kuzingatia vipingamano vyote na mipaka, kwa hili ni muhimu kupitisha true kwenye njia outerWidth na outerHeight:

let w = $('#test').outerWidth(true);
let h = $('#test').outerHeight(true);
$('#out').text('Upana: ' + w + ' Urefu: ' + h);

Sasa maadili yetu yatakuwa tofauti na yale ya awali kwa 20px zaidi, kwa sababu vipingamano vya nje kwetu ni 10px kwa kila upande.

Kamilisha suluhisho la matatizo yaliyopita - toa kwenye aya ya tatu chini ya divi #wrapper maadili ya upana na urefu wa divi #wrapper - kwa kuzingatia vipingamano vya ndani na mipaka, lakini bila vipingamano vya nje. Kwenye aya ya nne toa maadili ya upana na urefu wa divi #wrapper kwa kuzingatia vipingamano vyote na mipaka.

Pia kwa kutumia njia outerWidth na outerHeight 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').outerWidth(250, true);
$('#test2').outerHeight(200);

Njia zote zilizoainishwa za kufanya kazi na vipimo va kipengele pia zinatoa uwezekano wa kutumia kitendakazi kwa kila kipengele katika seti.