jQuery-dagi outerWidth va outerHeight metodlari

Oxirgi juft metodlar - outerWidth va outerHeight bo‘lib, ular yordamida elementning kengligi va balandligini barcha chet boshliklari va chegaralarini hisobga olgan holda olish mumkin, yoki tashqi chet boshliklarni margin hisobga olmaslik mumkin.

Keling, bir misolni ko'rib chiqaylik. Faraz qilaylik, bizda bir abzat bor:

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

CSS quyidagicha ko'rinadi:

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

Keling, #test abzatining kenglik va balandlik qiymatlarini ichki chet boshliklar va chegaralarni hisobga olgan holda olamiz, buning uchun ushbu metodlarga false uzatish kerak yoki qavslarni bo'sh qoldirish mumkin (chunki unda metodda standart holatda shunday):

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

Endi bizning qiymatlarimiz yana 4px ga farq qiladi, chunki har tomondagi chegaralar qalinligi 2px.

Endi esa keling, #test abzatining kenglik va balandlik qiymatlarini barcha chet boshliklar va chegaralarni hisobga olgan holda olamiz, buning uchun outerWidth va outerHeight metodlariga true uzatish kerak:

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

Endi bizning qiymatlarimiz oldingilaridan yana 20px ga farq qiladi, chunki bizning tashqi chet boshliklarimiz har tomondan 10px.

Oldingi vazifalar yechimini to'ldiring - #wrapper div elementi ostidagi uchinchi abzatga #wrapper div elementining kenglik va balandlik qiymatlarini chiqaring - ichki chet boshliklar va chegaralarni hisobga olgan, lekin tashqi chet boshliklarsiz. To'rtinchi abzatga esa #wrapper div elementining kenglik va balandlik qiymatlarini barcha chet boshliklar va chegaralarni hisobga olgan holda chiqaring.

Bundan tashqari, outerWidth va outerHeight metodlari yordamida biz elementlarning kenglik va balandlik qiymatlarini o'zgartirishimiz mumkin. Masalan, keling #test1 div elementining kengligini 250px ga, #test2 ning balandligini esa 200px ga tenglaylik:

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

Element o'lchamlari bilan ishlashning barcha ko'rsatilgan metodlari, shuningdek, to'plamdagi har bir elementga funksiyani qo'llash imkoniyatini nazarda tutadi.