jQuery-dagi innerWidth va innerHeight metodlari

innerWidth va innerHeight metodlari yordamida biz elementlarning kengligi va balandligini faqat kontentni emas, balki ichki chekinishlarni - padding ni ham hisobga olgan holda olamiz.

Keling, #test abzasining kenglik va balandlik qiymatlarini innerWidth va innerHeight yordamida olaylik va ularni boshqa abzaga chiqaraylik. Bizda ikkita abzat bo‘lsin:

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

CSS esa shunday ko‘rinadi:

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

Javascript da quyidagi kodni yozamiz:

let w = $('#test').innerWidth();
let h = $('#test').innerHeight();
$('#out').text('Kenglik: ' + w + ' Balandlik: ' + h);

Ko‘rib turganingizdek, qiymatlar 10px ga farq qiladi, chunki ichki chekinishlar hisobga olinadi, ular bizning holatimizda har tomondan 5px ni tashkil qiladi.

Shuningdek, innerWidth va innerHeight metodlari yordamida biz elementlarning kenglik va balandlik qiymatlarini o‘zgartirishimiz mumkin. Masalan, keling #test1 divining kengligini 250px ga, balandligini esa #test2 divining 200px ga tenglaylik:

$('#test1').innerWidth(250);
$('#test2').innerHeight(200);

Birinchi masala yechimini to‘ldiring - #wrapper divi ostidagi ikkinchi abzatga #wrapper divining kenglik va balandlik qiymatlarini, bu safar tashqi chegaralar va tashqi chekinishlarni hisobga olmagan holda, lekin ichki chekinishlarni hisobga olgan holda chiqaring.