Metodat width dhe height në jQuery

Metodat width dhe height marrin, përkatësisht, gjerësinë dhe lartësinë e përmbajtjes së elementit pa marrë parasysh padding, border dhe margin.

Le të marrim vlerat e gjerësisë dhe lartësisë së paragrafit #test dhe t'i shfaqim ato në një paragraf tjetër. Le të marrim, për shembull, kodin HTML vijues:

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

Stili CSS i paragrafit duket kështu:

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

Tani shkruajmë kodin Javascript:

let w = $('#test').width();
let h = $('#test').height();
$('#out').text('Gjerësia: ' + w + ' Lartësia: ' + h);

Gjithashtu lehtësisht me ndihmën e këtyre metodave ne mund të ndryshojmë vlerat e gjerësisë dhe lartësisë së elementeve. Për shembull, le të vendosim gjerësinë e div-it #test1 të barabartë me 250px, dhe lartësinë e #test2 - 200px:

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

Ne kemi këtë 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>

Stilet e mëposhtme CSS:

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

Merrni dhe shfaqni vlerat e gjerësisë dhe lartësisë së div-it #wrapper pa marrë parasysh marginat dhe borderat. Vlerat shfaqini në paragrafin e parë nën këtë div.