Meetodid innerWidth ja innerHeight jQuery-s

Meetodite innerWidth ja innerHeight abil saame elemendi laiuse ja kõrguse, kuid seekord arvestades lisaks sisule ka sisemisi vahesid - padding.

Saagem lõigu #test laiuse ja kõrguse väärtused seekord meetodite innerWidth ja innerHeight abil ning väljastame need teise lõigu. Olgu meil kaks lõigu:

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

CSS näeb välja selline:

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

Javascript-is kirjutame järgmise koodi:

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

Nagu näete, erinevad väärtused juba 10px võrra, kuna arvestatakse ka sisemisi vahesid, mis meie puhul on kõigil külgedel 5px.

Samuti saame meetodite innerWidth ja innerHeight abil lihtsalt muuta elementide laiuse ja kõrguse väärtusi. Näiteks määrame div-i #test1 laiuseks 250px ja div-i #test2 kõrguseks 200px:

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

Täiendage esimese ülesande lahendust - väljastage teise lõigu div-i #wrapper all div-i #wrapper laiuse ja kõrguse väärtused, seekord sisemiste vahede arvestamisega, kuid ilma ääriste ja väliste vaheteta.