Metode innerWidth i innerHeight u jQuery-u

Pomoću metoda innerWidth i innerHeight dobijamo širinu i visinu elemenata, ali već uzimajući u obzir ne samo sadržaj, već i unutrašnje odmake - padding.

Hajde da dobijemo vrednosti širine i visine pasusa #test, ali već uz pomoć innerWidth i innerHeight, i ispišemo ih u drugi pasus. Neka imamo dva pasusa:

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

CSS izgleda ovako:

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

U Javascript-u upisujemo sledeći kod:

let w = $('#test').innerWidth();
let h = $('#test').innerHeight();
$('#out').text('Širina: ' + w + ' Visina: ' + h);

Kao što vidite vrednosti se već razlikuju za 10px, pošto se uzimaju u obzir unutrašnji odmaci, koji u našem slučaju iznose po 5px sa svih strana.

Takođe jednostavno uz pomoć metoda innerWidth i innerHeight možemo promeniti vrednosti širine i visine elemenata. Na primer, hajde da postavimo širinu div-a #test1 jednaku 250px, a visinu #test2 na 200px:

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

Dopunite rešenje prvog zadatka - ispišite u drugi pasus ispod div-a #wrapper vrednosti širine i visine div-a #wrapper, ovaj put uzimajući u obzir unutrašnje odmake, ali bez obzira na granice i spoljašnje odmake.