Metóda outerHeight

Metóda outerHeight umožňuje získať a zmeniť výšku elementu s prihliadnutím na vnútorné odsadenia, okraje a výberovo - vonkajšie odsadenia elementu. Dôležité je pamätať, že budeme dostávať 'vypočítanú hodnotu' výšky (computed height). Chyby vo výpočte môžu tiež nastať, ak používateľ mení veľkosť stránky, alebo ak je element alebo jeho rodič skrytý.

Syntax

Takto môžeme získať výšku elementu. Táto metóda môže prijať voliteľný parameter v tvare true alebo false (false je predvolené), v závislosti od toho - či sa budú brať do úvahy vonkajšie odsadenia alebo nie. V niektorých prípadoch môžu byť získané hodnoty desatinné:

$(selector).outerWidth([include_margin]);

Na zmenu výšky elementu - môžeme odovzdať jednoducho číslo (napríklad 400), potom jednotky merania budú pixely, alebo reťazec, s uvedením jednotiek merania (napríklad '10em'):

$(selector).outerHeight(nová hodnota, [include_margin]);

Tiež môžeme aplikovať zadanú funkciu na každý element v súbore. Pritom prvým parametrom funkcia dostane číslo elementu v súbore, a druhým parametrom - aktuálnu hodnotu zadanej výšky pre konkrétny element. this vo vnútri funkcie bude ukazovať na aktuálny element. Hodnota výšky elementu sa zmení na tú, ktorú funkcia vráti:

$(selector).outerHeight(function(index, currentHeight));

Príklad

Pre porovnanie vypíšme informácie o výške odseku #test, získanej metódami height, innerHeight a outerHeight:

<p id="test">text</p>
<p id="out1"></p>
<p id="out2"></p>
<p id="out3"></p>
<p id="out4"></p>

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

let h1 = $('#test').height();
let h2 = $('#test').innerHeight();
let h3 = $('#test').outerHeight();
let h4 = $('#test').outerHeight(true);

$('#out1').text(h1);
$('#out2').text(h2);
$('#out3').text(h3);
$('#out4').text(h4);

Pozrite tiež

metóda height,
ktorá umožňuje získať a zmeniť výšku elementu
metóda innerHeight,
ktorá umožňuje získať a zmeniť výšku elementu, s prihliadnutím na jeho vnútorné odsadenia