jQuery'деги outerWidth жана outerHeight ыкмалары

Акыркы жуп ыкмалар - outerWidth жана outerHeight, алардын жардамы менен элементтин енин жана бийиктигин бардык эле кошумча аралыктар жана чектер менен алууга болот, же тышкы margin аралыктарды эске албаса болот.

Мисалды карап көрөлү. Бизде параграф бар дейли:

<p id="test">текст</p>
<p id="out"></p>

CSS төмөнкүдөй көрүнөт:

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

Келгиле, #test параграфынын эн жана бийиктик маанилерин алалы ички аралыктар жана чектерди эске алып, бул үчүн бул ыкмаларга false өткөрүп берүү керек же кашааларды бош калтырса болот (анткени ал ыкмада демейки абалда турган):

let w = $('#test').outerWidth(false);
let h = $('#test').outerHeight();
$('#out').text('En: ' + w + ' Biyiktiği: ' + h);

Эми биздин маанилерибиз дагы 4px менен айырмаланып турат, анткени ар бир тараптагы чегинин калыңдыгы 2px.

Эми болсо, #test параграфынын эн жана бийиктик маанилерин алалы бардык аралыктар жана чектерди эске алып, бул үчүн outerWidth жана outerHeight ыкмаларына true өткөрүп берүү керек:

let w = $('#test').outerWidth(true);
let h = $('#test').outerHeight(true);
$('#out').text('En: ' + w + ' Biyiktiği: ' + h);

Эми биздин маанилерибиз мурункулардан дагы айырмаланып турат дагы 20px менен, анткени биздин тышкы аралыктарыбыз ар бир тараптан 10px.

Мурунку тапшырмалардын чечимин толуктагыла - үчүнчү параграфка #wrapper дивинин астына #wrapper дивинин эн жана бийиктик маанилерин чыгарыгыла - ички аралыктар жана чектер менен, бирок тышкы аралыктарсыз. Төртүнчү параграфка #wrapper дивинин эн жана бийиктик маанилерин бардык аралыктар жана чектер менен чыгарыгыла.

Ошондой эле outerWidth жана outerHeight ыкмаларынын жардамы менен биз элементтердин эн жана бийиктик маанилерин өзгөртө алабыз. Мисалы, #test1 дивинин энин 250px кылалы, ал эми #test2 дивинин бийиктигин - 200px:

$('#test1').outerWidth(250, true);
$('#test2').outerHeight(200);

Элементтин өлчөмдөрү менен иштөөнүн көрсөтүлгөн бардык ыкмалары ошондой эле топтогу ар бир элементке функцияны колдонуу мүмкүнчүлүгүн камтыйт.