Metodat outerWidth dhe outerHeight në jQuery

Çifti i fundit i metodave - outerWidth dhe outerHeight, me ndihmën e të cilave është e mundur të merret gjerësia dhe lartësia e një elementi duke marrë parasysh të gjitha hapësirat dhe kufijtë, dhe mund të mos merrni parasysh hapësirat e jashtme margin.

Le të shqyrtojmë një shembull. Le të themi se kemi një paragraf:

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

CSS duket kështu:

p {
	margin: 10px;
	padding: 5px;
	border: 2px solid blue;
}

Le të marrim vlerat e gjerësisë dhe lartësisë së paragrafit #test, duke marrë parasysh hapësirat e brendshme dhe kufijtë, për këtë në këto metoda është e nevojshme të transmetohet false ose të lihen kllapat bosh (pasi është vendosur tashmë në metodë si parazgjedhje):

let w = $('#test').outerWidth(false);
let h = $('#test').outerHeight();
$('#out').text('Width: ' + w + ' Height: ' + h);

Tani vlerat tona do të ndryshojnë me 4px të tjerë, pasi trashësia e kufijve është 2px nga secila anë.

Dhe tani le të marrim vlerat e gjerësisë dhe lartësisë së paragrafit #test, duke marrë parasysh të gjitha hapësirat dhe kufijtë, për këtë në metodat outerWidth dhe outerHeight është e nevojshme të transmetohet true:

let w = $('#test').outerWidth(true);
let h = $('#test').outerHeight(true);
$('#out').text('Width: ' + w + ' Height: ' + h);

Tani vlerat tona do të ndryshojnë nga ato të mëparshme me 20px të tjerë, pasi hapësirat tona të jashtme janë 10px nga secila anë.

Plotësoni zgjidhjen e detyrave të mëparshme - shfaqni në paragrafin e tretë nën div #wrapper vlerat e gjerësisë dhe lartësisë së div #wrapper - duke marrë parasysh hapësirat e brendshme dhe kufijtë, por pa hapësirat e jashtme. Në paragrafin e katërt shfaqni vlerat e gjerësisë dhe lartësisë së div #wrapper duke marrë parasysh të gjitha hapësirat dhe kufijtë.

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

$('#test1').outerWidth(250, true);
$('#test2').outerHeight(200);

Të gjitha metodat e përmendura të punës me madhësitë e elementit gjithashtu parashikojnë mundësinë e aplikimit të një funksioni për çdo element në grup.