outerWidth metodi

outerWidth metodi elementning kengligini ichki chekinishlar, chegaralar va ixtiyoriy ravishda - tashqi chekinishlarni hisobga olgan holda olish va o'zgartirish imkonini beradi. Muhim esda tutish kerakki, biz kenglikning 'hisoblangan qiymati'ni (computed width) olamiz. Hisoblashda xatolar, foydalanuvchi sahifa o'lchamlarini o'zgartirganda, shuningdek, element yoki uning ota-onasi yashiringan bo'lsa, paydo bo'lishi mumkin.

Sintaksis

Biz elementning kengligini shu tarzda olishimiz mumkin. Ushbu metod ixtiyoriy parametrni true yoki false (false standart holatda) ko'rinishida qabul qilishi mumkin, tashqi chekinishlar hisobga olinadimi yoki yo'qligiga qarab. Ba'zi hollarda olingan qiymatlar kasrli bo'lishi mumkin:

$(selector).outerWidth([marginni_hisobga_olgan_holda]);

Elementning kengligini o'zgartirish uchun oddiy raqam (masalan 400) uzatish mumkin, bunda o'lchov birligi piksellar bo'ladi, yoki o'lchov birligini ko'rsatadigan satr (masalan '10em'):

$(selector).outerWidth(yangi_qiymat, [marginni_hisobga_olgan_holda]);

Shuningdek, biz belgilangan funktsiyani to'plamdagi har bir elementga qo'llashimiz mumkin. Bunda funktsiya birinchi parametr sifatida to'plamdagi elementning indeksini, ikkinchi parametr sifatida esa aniq element uchun belgilangan kenglikning joriy qiymatini oladi. Funktsiya ichidagi this joriy elementni ko'rsatadi. Elementning kenglik qiymati funktsiya qaytargan qiymatga o'zgaradi:

$(selector).outerWidth(function(to'plamdagi indeks, kenglikning joriy qiymati));

Misol

Keling, solishtirish uchun #test abzatsining kengligi haqida ma'lumotni, width, innerWidth va outerWidth metodlari orqali olingan qiymatlarni chiqaramiz:

<p id="test">matn</p>
<p id="out1"></p>
<p id="out2"></p>
<p id="out3"></p>
<p id="out4"></p>

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

let w1 = $('#test').width();
let w2 = $('#test').innerWidth();
let w3 = $('#test').outerWidth(false);
let w4 = $('#test').outerWidth(true);

$('#out1').text(w1);
$('#out2').text(w2);
$('#out3').text(w3);
$('#out4').text(w4);

Shuningdek qarang

width metodi,
elementning kengligini olish va o'zgartirish imkonini beradi
innerWidth metodi,
elementning kengligini uning ichki chekinishlarini hisobga olgan holda olish va o'zgartirish imkonini beradi