Metóda height

Metóda height umožňuje získať a zmeniť výšku elementu. Dôležité je pamätať, že budeme dostávať 'vypočítanú hodnotu' výšky (computed height). Na rozdiel od metódy css('height'), vracia bezrozmernú hodnotu (napríklad 400) a je vhodná pre matematické výpočty. Metóda získava výšku obsahu elementu, nezávisle od zadania CSS vlastnosti box-sizing. Aby sme sa vyhli zbytočným výpočtom, odporúča sa používať css('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ý. Hodnota výšky nezahŕňa hodnoty odsadenia a okraja.

Syntax

Získať výšku elementu. V niektorých prípadoch získané hodnoty môžu byť desatinné:

$(selektor).height();

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

$(selektor).height(nová hodnota);

Tiež môžeme aplikovať zadanú funkciu na každý element v množine. Prvým parametrom funkcia získa poradové číslo elementu v množine, 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ú vráti funkcia:

$(selektor).height(function(poradové číslo v množine, aktuálna hodnota výšky));

Príklad

Po kliknutí na #test zmeňme mu výšku na hodnotu 30px, pomocou metódy height, a tiež pomocou css zmeňme jeho pozadie na zelené:

<div id="test"></div>

#test {
	width: 50px; 
	height: 90px;
	background: red; 
	color: white;
	margin-top: 10px; 
	cursor: pointer;
}

$('#test').one('click', function() {
	$(this).height(30).css({
		cursor: 'auto',
		backgroundColor: 'green'
	});
});

Pozri tiež

metóda width,
ktorá umožňuje získať a zmeniť šírku elementu
metóda innerHeight,
ktorá umožňuje získať a zmeniť výšku elementu, vrátane jeho vnútorných odsadení
metóda outerHeight,
ktorá umožňuje získať a zmeniť výšku elementu, vrátane jeho odsadení a okraja
metóda css,
ktorá umožňuje získať a zmeniť CSS štýly elementu