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:

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

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

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

Nu schrijven we de Javascript-code:

javascriptlet 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:

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

html<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>

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