innerWidth en innerHeight methoden in jQuery

Met de methoden innerWidth en innerHeight krijgen we de breedte en hoogte van elementen, maar nu rekening houdend met niet alleen de inhoud, maar ook de interne opvulling - padding.

Laten we de breedte- en hoogtewaarden van de alinea #test verkrijgen, maar deze keer met behulp van innerWidth en innerHeight, en ze uitvoeren in een andere alinea. Laten we zeggen we hebben twee alinea's:

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

De CSS ziet er als volgt uit:

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

In Javascript schrijven we de volgende code:

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

Zoals u kunt zien, verschillen de waarden al met 10px, omdat er rekening wordt gehouden met de interne opvulling, die in ons geval is 5px aan alle kanten.

Ook eenvoudig met de methoden innerWidth en innerHeight kunnen we de breedte- en hoogtewaarden van elementen wijzigen. Laten we bijvoorbeeld de breedte van de div #test1 instellen op 250px, en de hoogte van #test2 - op 200px:

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

Vul de oplossing van de eerste taak aan - voer in de tweede alinea onder de div #wrapper de breedte- en hoogtewaarden van de div #wrapper uit, deze keer rekening houdend met de interne opvulling, maar zonder rekening te houden met randen en externe marges.