Методи innerWidth и innerHeight у jQuery-у

Помоћу метода innerWidth и innerHeight добијамо ширину и висину елемената, али већ уз учење не само садржаја, већ и унутрашњих одступа - padding.

Хајде да добијемо вредности ширине и висине параграфа #test, али већ уз помоћ innerWidth и innerHeight, и испишимо их у други параграф. Нека имамо два параграфа:

html<p id="test">текст</p>
<p id="out"></p>

CSS изгледа овако:

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

У Javascript упишемо следећи код:

javascriptlet w = $('#test').innerWidth();
let h = $('#test').innerHeight();
$('#out').text('Ширина: ' + w + ' Висина: ' + h);

Као што видите вредности се већ разликују за 10px, јер се узимају у обзир унутрашња одступа, која у нашем случају износе по 5px са свих страна.

Такође једноставно помоћу метода innerWidth и innerHeight можемо променити вредности ширине и висине елемената. На пример, хајде да поставимо ширину дива #test1 једнаку 250px, а висину #test2 - 200px:

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