Metódy outerWidth a outerHeight v jQuery

Posledný pár metód - outerWidth a outerHeight, pomocou ktorých je možné získať šírku a výšku prvku so všetkými odstupmi a okrajmi, alebo je možné nezohľadňovať vonkajšie odsadenia margin.

Zoberme si príklad. Predpokladajme, že máme odstavec:

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

CSS vyzerá takto:

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

Získajme hodnoty šírky a výšky odseku #test, berúc do úvahy vnútorné odsadenia a okraje, na to je potrebné odovzdať týmto metódam false alebo nechať zátvorky prázdne (pretože je to v metóde predvolené):

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

Teraz sa naše hodnoty budú líšiť ešte o 4px, pretože hrúbka okrajov je 2px na každej strane.

A teraz získajme hodnoty šírky a výšky odseku #test, berúc do úvahy všetky odsadenia a okraje, na to je potrebné odovzdať metódam outerWidth a outerHeight true:

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

Teraz sa naše hodnoty budú líšiť od predchádzajúcich ešte o 20px, pretože vonkajšie odsadenia sú 10px na každej strane.

Doplňte riešenie predchádzajúcich úloh - vypíšte do tretieho odseku pod divom #wrapper hodnoty šírky a výšky divu #wrapper - s vnútornými odsadeniami a okrajmi, ale bez vonkajších odsadení. Do štvrtého odseku vypíšte hodnoty šírky a výšky divu #wrapper so všetkými odsadeniami a okrajmi.

Tiež pomocou metód outerWidth a outerHeight môžeme zmeniť hodnoty šírky a výšky prvkov. Napríklad, nastavme šírku divu #test1 na 250px a výšku #test2 na 200px:

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

Všetky uvedené metódy práce s veľkosťami prvku tiež poskytujú možnosť aplikovať funkciu na každý prvok v množine.