Metódy innerWidth a innerHeight v jQuery

Pomocou metód innerWidth a innerHeight získavame šírku a výšku elementov, ale už s ohľadom nielen na obsah, ale aj na vnútorné odsadenia - padding.

Získajme hodnoty šírky a výšky odseku #test, ale teraz pomocou innerWidth a innerHeight, a vypíšme ich do iného odseku. Nech máme dva odseky:

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

CSS vyzerá takto:

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

V Javascripte napíšeme nasledujúci kód:

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

Ako vidíte, hodnoty sa už líšia o 10px, pretože sa berú do úvahy vnútorné odsadenia, ktoré v našom prípade predstavujú 5px zo všetkých strán.

Taktiež jednoducho pomocou metód innerWidth a innerHeight môžeme zmeniť hodnoty šírky a výšky elementov. Napríklad, nastavme šírku divu #test1 na 250px a výšku #test2 na 200px:

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

Doplňte riešenie prvej úlohy - vypíšte do druhého odseku pod divom #wrapper hodnoty šírky a výšky divu #wrapper, tentoraz s ohľadom na vnútorné odsadenia, ale bez ohľadu na okraje a vonkajšie odsadenia.