Metoderna width och height i jQuery

Metoderna width och height hämtar, respektive, bredden och höjden på elementets innehåll utan att ta hänsyn till padding, border och margin.

Låt oss hämta värdena för bredd och höjd på stycket #test och skriva ut dem i ett annat stycke. Låt oss ta, som exempel, följande HTML-kod:

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

CSS-stilen för stycket ser ut så här:

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

Nu skriver vi Javascript-koden:

let w = $('#test').width();
let h = $('#test').height();
$('#out').text('Bredd: ' + w + ' Höjd: ' + h);

Det är också enkelt att med dessa metoder ändra värdena för bredd och höjd på element. Låt oss till exempel sätta bredden på div #test1 till 250px, och höjden på #test2 till 200px:

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

Vi har följande 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öljande CSS-stilar:

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

Hämta och skriv ut värdena för bredd och höjd på div #wrapper utan att ta hänsyn till marginaler och kanter. Skriv ut värdena i det första stycket under denna div.