jQuery да innerWidth ва innerHeight методлари

innerWidth ва innerHeight методлари ёрдамида биз элементларнинг ен ва бўйнини факат контентни эмас, балки ички чекланишларни - padding ни ҳам ҳисобга олган ҳолда оламиз.

Келинг, #test абзацининг эн ва бўй қийматларини innerWidth ва innerHeight ёрдамида олиб, бошқа абзацда чиқарайлик. Бизда иккита абзац бор деб фараз қилайлик:

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

CSS шундай кўринади:

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

Javascript да куйидаги кодни ёзамиз:

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

Кўриб турганингиздек, қийматлар 10px га фарқ қилади, чунки ички чекланишлар ҳам ҳисобга олинди, бу эса бизнинг ҳолимизда ҳар томондан 5px ни ташкил этади.

Шунингдек, innerWidth ва innerHeight методлари ёрдамида биз элементларнинг эн ва бўй қийматларини ўзгартиришимиз мумкин. Мисол учун, #test1 дивнинг энини 250px га, #test2 дивнинг бўйини эса 200px га тенглаштирайлик:

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

Биринчи масаланинг ечимини тўлдиринг - #wrapper диви остидаги иккинчи абзацда #wrapper дивининг эн ва бўй қийматларини, бу сафар ташқи чекланишлар ва чекларини ҳисобга олмаган ҳолда, лекин ички чекланишларни ҳисобга олган ҳолда чиқаринг.