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('Ені: ' + w + ' Биіктігі: ' + h);

Енді біздің мәндерімiz тағы 4px-ге өзгеше болады, себебі әр жағындағы шекара қалыңдығы 2px.

Енді #test абзацының ені мен биіктігінің мәндерін алайық, барлық шектер мен шекараларды ескере отырып, ол үшін outerWidth және outerHeight әдістеріне true беру керек:

let w = $('#test').outerWidth(true);
let h = $('#test').outerHeight(true);
$('#out').text('Ені: ' + w + ' Биіктігі: ' + h);

Енді біздің мәндерімiz алдыңғылардан тағы 20px-ге өзгеше болады, себебі біздің сыртқы шектеріміз әр жағында 10px.

Алдыңғы тапсырмалардың шешімін толықтырыңыз - #wrapper дивінің астындағы үшінші абзацқа #wrapper дивінің ені мен биіктігінің мәндерін шығарыңыз - ішкі шектер мен шекараларды ескере отырып, бірақ сыртқы шектерсіз. Төртінші абзацқа #wrapper дивінің ені мен биіктігінің мәндерін барлық шектер мен шекараларды ескере отырып шығарыңыз.

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

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

Элемент өлшемдерімен жұмыс істейтін барлық көрсетілген әдістер сондай-ақ жиынның әрбір элементіне функцияны қолдану мүмкіндігін қамтамасыз етеді.