innerWidth- ja innerHeight-metodit jQuery:ssä

innerWidth- ja innerHeight-metodien avulla saamme elementtien leveyden ja korkeuden, mutta nyt ottuen huomioon paitsi sisällön myös sisäiset marginaalit - padding.

Saadaanpa kappaleen #test leveys- ja korkeusarvot nyt innerWidth- ja innerHeight-metodien avulla, ja tulostetaan ne toiseen kappaleeseen. Olkoon meillä kaksi kappaletta:

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

CSS näyttää tältä:

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

Javascript-kielellä kirjoitamme seuraavan koodin:

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

Kuten näette, arvot eroavat jo 10px:llä, koska huomioidaan sisäiset marginaalit, jotka meidän tapauksessamme ovat 5px kaikilta sivuilta.

Myös yksinkertaisesti innerWidth- ja innerHeight-metodien avulla voimme muuttaa elementtien leveys- ja korkeusarvoja. Asetetaanpa esimerkiksi divin #test1 leveys 250px:ksi ja korkeus #test2 - 200px:ksi:

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

Täydennä ensimmäisen tehtävän ratkaisua - tulosta toiseen kappaleeseen divin #wrapper alle divin #wrapper leveys- ja korkeusarvot, tällä kertaa ottuen huomioon sisäiset marginaalit, mutta ilman reunoja ja ulkomarginaaleja.