Metody innerWidth a innerHeight v jQuery

Pomocí metod innerWidth a innerHeight získáme šířku a výšku prvků, ale již s ohledem nejen na obsah, ale i na vnitřní odsazení - padding.

Získejme hodnoty šířky a výšky odstavce #test, ale již pomocí innerWidth a innerHeight, a vypišme je do jiného odstavce. Nechť máme dva odstavce:

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

CSS vypadá takto:

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

V Javascriptu napíšeme následující kód:

let w = $('#test').innerWidth();
let h = $('#test').innerHeight();
$('#out').text('Šířka: ' + w + ' Výška: ' + h);

Jak vidíte, hodnoty se již liší o 10px, protože jsou zohledněny vnitřní odsazení, které v našem případě činí 5px ze všech stran.

Také jednoduše pomocí metod innerWidth a innerHeight můžeme změnit hodnoty šířky a výšky prvků. Například nastavme šířku divu #test1 na 250px a výšku #test2 na 200px:

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

Doplňte řešení prvního úkolu - vypište do druhého odstavce pod divem #wrapper hodnoty šířky a výšky divu #wrapper, tentokrát s ohledem na vnitřní odsazení, ale bez ohledu na okraje a vnější odsazení.