innerWidth ir innerHeight metodai jQuery

Naudodami innerWidth ir innerHeight metodus mes gauname elementų plotį ir aukštį, jau atsižvelgdami ne tik į turinį, bet ir į vidinius atstupus - padding.

Gaukime pastraipos pločio ir aukščio reikšmes #test, bet jau naudodami innerWidth ir innerHeight, ir išveskime jas kitoje pastraipoje. Tebūnie mums dvi pastraipos:

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

CSS atrodo taip:

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

Javascript parašykime tokį kodą:

let w = $('#test').innerWidth();
let h = $('#test').innerHeight();
$('#out').text('Plotis: ' + w + ' Aukštis: ' + h);

Kaip matote, reikšmės jau skiriasi 10px, nes atsižvelgiama į vidinius atstupus, kurie mūsų atveju sudaro 5px iš visų pusių.

Taip pat paprastai, naudojant innerWidth ir innerHeight metodus, mes galime pakeisti elementų pločio ir aukščio reikšmes. Pavyzdžiui, nustatykime div #test1 plotį lygų 250px, o aukštį #test2 - 200px:

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

Papildykite pirmosios užduoties sprendimą - išveskite antroje pastraipoje po div #wrapper div #wrapper pločio ir aukščio reikšmes, šį kartą atsižvelgdami į vidinius atstupus, bet be rėmelio ir išorinių atstupų.