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:

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

CSS vyzerá takto:

cssp {
  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é):

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

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

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:

javascript$('#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.