Методи innerWidth и innerHeight у jQuery-у
Помоћу метода innerWidth и
innerHeight добијамо ширину и висину
елемената, али већ уз учење не само садржаја, већ
и унутрашњих одступа - padding.
Хајде да добијемо вредности ширине и висине параграфа
#test, али већ уз помоћ innerWidth и
innerHeight, и испишимо их у други параграф. Нека
имамо два параграфа:
<p id="test">текст</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('Ширина: ' + w + ' Висина: ' + h);
Као што видите вредности се већ разликују за 10px,
јер се узимају у обзир унутрашња одступа, која у
нашем случају износе по 5px са свих страна.
Такође једноставно помоћу метода innerWidth и
innerHeight можемо
променити вредности ширине и висине елемената.
На пример, хајде да поставимо ширину дива #test1
једнаку 250px, а висину #test2 - 200px:
$('#test1').innerWidth(250);
$('#test2').innerHeight(200);
Допуните решење првог задатка - испишите
у други параграф испод дива #wrapper
вредности ширине и висине дива #wrapper, овог
пута уз узимање у обзир унутрашњих одступа, али без
узимања у обзир граница и спољних одступа.
