innerWidth og innerHeight metoder i jQuery

Ved hjælp af metoderne innerWidth og innerHeight får vi bredden og højden af elementer, men denne gang inklusive ikke kun indholdet, men også den indre polstring - padding.

Lad os få bredde- og højdeværdierne for afsnittet #test, men denne gang ved hjælp af innerWidth og innerHeight, og udskrive dem i et andet afsnit. Lad os sige, at vi har to afsnit:

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

CSS ser sådan ud:

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

I Javascript skriver vi følgende kode:

let w = $('#test').innerWidth();
let h = $('#test').innerHeight();
$('#out').text('Bredde: ' + w + ' Højde: ' + h);

Som I kan se, er værdierne allerede forskellige med 10px, da den indre polstring tages i betragtning, hvilket i vores tilfælde udgør 5px på alle sider.

Ligeså enkelt kan vi ved hjælp af metoderne innerWidth og innerHeight ændre bredde- og højdeværdierne for elementer. For eksempel, lad os sætte bredden af div'en #test1 til 250px, og højden af #test2 til 200px:

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

Udbyg løsningen på den første opgave - udskriv i det andet afsnit under div'en #wrapper bredde- og højdeværdierne for div'en #wrapper, denne gang inklusive den indre polstring, men uden at tage hensyn til kanter og ydre margener.