Metoda outerHeight

Metoda outerHeight umožňuje získat a změnit výšku prvku včetně vnitřních odsazení, okraje a volitelně - vnějších odsazení prvku. Důležité je pamatovat, že získáme 'vypočítanou hodnotu' výšky (computed height). Chyby ve výpočtu mohou také nastat, pokud uživatel změní velikost stránky, nebo pokud je prvek nebo jeho rodič skrytý.

Syntaxe

Takto můžeme získat výšku prvku. Tato metoda může přijmout volitelný parametr ve formě true nebo false (false je výchozí), v závislosti na tom - zda budou zahrnuty vnější odsazení nebo ne. V některých případech mohou být získané hodnoty zlomkové:

$(selektor).outerWidth([včetně_margin]);

Pro změnu šířky prvku - lze předat jednoduše číslo (například 400), poté jednotky měření budou pixely, nebo řetězec, s uvedením jednotek měření (například '10em'):

$(selektor).outerHeight(nová hodnota, [včetně_margin]);

Také můžeme aplikovat danou funkci na každý prvek v sadě. Přitom první parametr funkce obdrží číslo prvku v sadě, a druhý parametr - aktuální hodnotu dané výšky pro konkrétní prvek. this uvnitř funkce bude ukazovat na aktuální prvek. Hodnota šířky prvku se změní na tu, kterou funkce vrátí:

$(selektor).outerHeight(function(číslo v sadě, aktuální hodnota výšky));

Příklad

Pojďme pro srovnání vypsat informace o výšce odstavce #test, získané metodami 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);

Viz také

metoda height,
která umožňuje získat a změnit výšku prvku
metoda innerHeight,
která umožňuje získat a změnit výšku prvku, s ohledem na jeho vnitřní odsazení