Metody innerWidth i innerHeight w jQuery

Za pomocą metod innerWidth i innerHeight otrzymujemy szerokość i wysokość elementów, ale już z uwzględnieniem nie tylko treści, ale i wewnętrznych odstępów - padding.

Otrzymajmy wartości szerokości i wysokości akapitu #test, ale już za pomocą innerWidth i innerHeight, i wypiszmy je w innym akapicie. Niech mamy dwa akapity:

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

CSS wygląda tak:

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

W Javascript piszemy następujący kod:

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

Jak widzicie wartości już różnią się o 10px, ponieważ uwzględniane są wewnętrzne odstępy, które w naszym przypadku wynoszą po 5px ze wszystkich stron.

Również prosto za pomocą metod innerWidth i innerHeight możemy zmienić wartości szerokości i wysokości elementów. Na przykład, ustawmy szerokość diva #test1 równą 250px, a wysokość #test2 - 200px:

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

Uzupełnij rozwiązanie pierwszego zadania - wypisz w drugim akapicie pod divem #wrapper wartości szerokości i wysokości diva #wrapper, tym razem z uwzględnieniem wewnętrznych odstępów, ale bez uwzględnienia granic i zewnętrznych odstępów.