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:

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

CSS atrodo taip:

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

Javascript parašykime tokį kodą:

javascriptlet 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:

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