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:

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

Stili CSS i paragrafit duket kështu:

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

Tani shkruajmë kodin Javascript:

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

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