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:

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

CSS-stilen for afsnittet ser sådan ud:

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

Nu skriver vi Javascript-koden:

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

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

Vi har denne markup:

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

Følgende CSS-stile:

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

Hent og udskriv værdierne for bredden og højden af div'en #wrapper uden margener og kanter. Udskriv værdierne i det første afsnit under denne div.