Az innerWidth és innerHeight metódusok a jQuery-ben

A innerWidth és innerHeight metódusok segítségével az elemek szélességét és magasságát kaphatjuk meg, de most már nem csak a tartalmat, hanem a belső margókat - a padding-ot is figyelembe véve.

Kapjuk meg a #test bekezdés szélességének és magasságának értékeit a innerWidth és innerHeight segítségével, és írjuk ki egy másik bekezdésbe. Legyen két bekezdésünk:

<p id="test">szöveg</p>
<p id="out"></p>

A CSS így néz ki:

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

A Javascript-ben a következő kódot írjuk:

let w = $('#test').innerWidth();
let h = $('#test').innerHeight();
$('#out').text('Szélesség: ' + w + ' Magasság: ' + h);

Amint látható, az értékek most már 10px-rel eltérnek, mivel a belső margókat is figyelembe veszik, amelyek esetünkben minden oldalon 5px-esek.

Szintén egyszerűen a innerWidth és innerHeight metódusokkal megváltoztathatjuk az elemek szélességének és magasságának értékeit. Például állítsuk a #test1 div szélességét 250px-re, a #test2 magasságát pedig 200px-re:

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

Egészítse ki az első feladat megoldását - írja ki a második bekezdésbe a #wrapper div alá a #wrapper div szélességének és magasságának értékeit, de ezúttal a belső margókat is figyelembe véve, azonban a szegélyek és a külső margók nélkül.