Metodi innerWidth in innerHeight v jQuery

Z metodama innerWidth in innerHeight dobimo širino in višino elementov, vendar že ob upoštevanju ne le vsebine, temveč tudi notranjih odstavkov - padding.

Pridobimo vrednosti širine in višine odstavka #test, vendar tokrat s pomočjo innerWidth in innerHeight, in jih izpišimo v drug odstavek. Naj imamo dva odstavka:

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

CSS izgleda takole:

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

V Javascript zapišemo naslednjo kodo:

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

Kot vidite, se vrednosti že razlikujejo za 10px, saj se upoštevajo notranji odstavki, ki v našem primeru znašajo 5px z vseh strani.

Prav tako preprosto z metodama innerWidth in innerHeight lahko spremenimo vrednosti širine in višine elementov. Na primer, postavimo širino div-a #test1 na 250px, višino pa #test2 - na 200px:

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

Dopolnite rešitev prve naloge - izpišite v drugi odstavek pod div-om #wrapper vrednosti širine in višine div-a #wrapper, tokrat ob upoštevanju notranjih odstavkov, brez upoštevanja robov in zunanjih odstavkov.