innerWidth un innerHeight metodes jQuery

Ar innerWidth un innerHeight metožu palīdzību mēs iegūstam elementu platumu un augstumu, bet jau ņemot vērā ne tikai saturu, bet arī iekšējās atkāpes - padding.

Iegūsim rindkopas platumu un augstumu #test, bet jau ar innerWidth un innerHeight palīdzību, un izvadīsim tos citā rindkopā. Pieņemsim, ka mums ir divas rindkopas:

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

CSS izskatās šādi:

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

Javascript mēs pierakstām šādu kodu:

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

Kā redzat, vērtības jau atšķiras par 10px, jo tiek ņemtas vērā iekšējās atkāpes, kas mūsu gadījumā visās pusēs ir 5px.

Arī vienkārši ar innerWidth un innerHeight metožu palīdzību mēs varam mainīt elementu platuma un augstuma vērtības. Piemēram, iestatīsim diva #test1 platumu vienādu ar 250px, bet augstumu #test2 - 200px:

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

Papildiniet pirmā uzdevuma risinājumu - izvadiet otrajā rindkopā zem diva #wrapper diva #wrapper platuma un augstuma vērtības, šoreiz ņemot vērā iekšējās atkāpes, bet bez robežu un ārējo atkāpju ņemšanas vērā.