innerWidth og innerHeight metoder i jQuery

Ved hjelp av metodene innerWidth og innerHeight får vi bredden og høyden av elementer, men nå med tanke på ikke bare innholdet, men også innvendig avstand - padding.

La oss få bredde- og høydeverdiene til avsnittet #test, men nå ved hjelp av innerWidth og innerHeight, og skrive dem ut i et annet avsnitt. La oss ha to avsnitt:

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

CSS ser slik ut:

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øyde: ' + h);

Som du kan se, er verdiene allerede forskjellige med 10px, siden innvendig avstand tas i betraktning, som i vårt tilfelle er 5px på alle sider.

Også enkelt ved hjelp av metodene innerWidth og innerHeight kan vi endre bredde- og høydeverdiene til elementer. For eksempel, la oss sette bredden på div-en #test1 til 250px, og høyden på #test2 til 200px:

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

Fullfør løsningen på den første oppgaven - skriv ut i det andre avsnittet under div-en #wrapper bredde- og høydeverdiene til div-en #wrapper, denne gangen med tanke på innvendig avstand, men uten tanke på grenser og utvendig avstand.