width en height methoden in jQuery

De methoden width en height krijgen, respectievelijk, de breedte en hoogte van de inhoud van een element zonder padding, border en margin mee te rekenen.

Laten we de breedte- en hoogtewaarden van de alinea #test ophalen en ze in een andere alinea weergeven. Laten we, als voorbeeld, de volgende HTML-code nemen:

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

De CSS-stijl van de alinea ziet er als volgt uit:

p {
	margin: 10px;
	padding: 5px;
}

Nu schrijven we de Javascript-code:

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

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

$('#test1').width(250);
$('#test2').height(200);

We hebben de volgende opmaak:

<div id="wrapper">
<div id="test">tekst</div>
</div>
<p id="one"></p>
<p id="two"></p>
<p id="three"></p>
<p id="four"></p>

De volgende CSS-stijlen:

div {
margin: 10px;
padding: 5px;
border: 2px solid green;
}
#wrapper {
border-color: blueviolet;
}

Krijg en toon de breedte- en hoogtewaarden van de div #wrapper zonder marge en randen. Toon de waarden in de eerste alinea onder deze div.