width og height metoder i jQuery

Metoderne width og height henter, henholdsvis, bredden og højden af elementets indhold uden at tage højde for padding, border og margin.

Lad os hente værdierne for bredden og højden af afsnittet #test og udskrive dem i et andet afsnit. Lad os som eksempel tage følgende HTML-kode:

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

CSS-stilen for afsnittet ser sådan ud:

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

Nu skriver vi Javascript-koden:

javascriptlet w = $('#test').width();
let h = $('#test').height();
$('#out').text('Bredde: ' + w + ' Højde: ' + h);

Ligeledes kan vi nemt ændre værdierne for bredde og højde af elementer ved hjælp af disse metoder. For eksempel, lad os sætte bredden af div'en #test1 til 250px, og højden af #test2 - til 200px:

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

html<div id="wrapper">
<div id="test">text</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;
}