Metoderna innerWidth och innerHeight i jQuery

Med hjälp av metoderna innerWidth och innerHeight får vi bredden och höjden på element, men nu med hänsyn till inte bara innehåll utan även innanutfyllnad - padding.

Låt oss få bredd- och höjdvärdena för stycket #test, men nu med hjälp av innerWidth och innerHeight, och skriva ut dem i ett annat stycke. Låt oss ha två stycken:

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

CSS ser ut så här:

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

I Javascript skriver vi följande kod:

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

Som ni ser skiljer sig värdena redan med 10px, eftersom innanutfyllnad beaktas, vilket i vårt fall är 5px på alla sidor.

Det är också enkelt med metoderna innerWidth och innerHeight kan vi ändra bredd- och höjdvärdena för element. Låt oss till exempel sätta bredden på div #test1 till 250px, och höjden på #test2 till 200px:

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

Komplettera lösningen på den första uppgiften - skriv ut i det andra stycket under div #wrapper bredd- och höjdvärdena för div #wrapper, den här gången med hänsyn till innanutfyllnad, men utan hänsyn till kanter och yttre marginaler.