Metodat innerWidth dhe innerHeight në jQuery

Me ndihmën e metodave innerWidth dhe innerHeight ne marrim gjerësinë dhe lartësinë e elementeve, por tani duke marrë parasysh jo vetëm përmbajtjen, por edhe hapësirat e brendshme - padding.

Le të marrim vlerat e gjerësisë dhe lartësisë së paragrafit #test, por tani me ndihmën e innerWidth dhe innerHeight, dhe t'i shfaqim ato në një paragraf tjetër. Le të kemi dy paragrafe:

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

CSS duket kështu:

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

Në Javascript shkruajmë kodin e mëposhtëm:

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

Siç e shihni, vlerat tani ndryshojnë me 10px, pasi merren parasysh hapësirat e brendshme, të cilat në rastin tonë janë 5px nga të gjitha anët.

Gjithashtu lehtësisht me metodat innerWidth dhe innerHeight ne mund të ndryshojmë vlerat e gjerësisë dhe lartësisë së elementeve. Për shembull, le të vendosim gjerësinë e div-it #test1 të barabartë me 250px, dhe lartësinë e #test2 - 200px:

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

Plotësojeni zgjidhjen e detyrës së parë - shfaqni në paragrafin e dytë poshtë div-it #wrapper vlerat e gjerësisë dhe lartësisë së div-it #wrapper, këtë herë duke marrë parasysh hapësirat e brendshme, por pa marrë parasysh kufijtë dhe hapësirat e jashtme.