A height metódus

A height metódus lehetővé teszi elemek magasságának lekérését és módosítását. Fontos megjegyezni, hogy a 'számított értéket' kapjuk meg a magasságból (computed height). A css('height') metódustól eltérően, dimenzió nélküli értéket ad vissza (például 400) és kényelmes matematikai számításokhoz. A metódus az elem tartalmának magasságát kapja meg, függetlenül a CSS tulajdonság box-sizing megadásától. A felesleges számítások elkerülése érdekében ajánlott a css('height') használata. Számítási hibák akkor is előfordulhatnak, ha a felhasználó megváltoztatja az oldal méretét, vagy ha az elem vagy annak szülője rejtett. A magasság értéke nem veszi figyelembe a margókat és a kereteket.

Szintaxis

Elem magasságának lekérése. Egyes esetekben a kapott értékek törtek lehetnek:

$(selector).height();

Az elem magasságának megváltoztatásához - egyszerűen átadhatunk egy számot (például 400), ekkor a mértékegység pixel lesz, vagy egy karakterláncot, amely megadja a mértékegységet (például '10em'):

$(selector).height(új érték);

Egy adott függvényt is alkalmazhatunk minden egyes elemre a halmazban. Ekkor az első paraméterként a függvény megkapja az elem számát a halmazban, a második paraméterként pedig az adott elem aktuális magasságértékét. A this a függvényen belül az aktuális elemre mutat.

Az elem magasságának értéke azon értékre változik, amelyet a függvény visszaad:

$(selector).height(function(sorszám a halmazban, aktuális magasságérték));

Példa

Kattintáskor a #test elem magasságát 30px értékre állítjuk, a height metódus segítségével, valamint a css segítségével a hátterét zöldre változtatjuk:

<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'
	});
});

Lásd még

a width metódus,
amely lehetővé teszi elemek szélességének lekérését és módosítását
a innerHeight metódus,
amely lehetővé teszi elemek magasságának lekérését és módosítását, figyelembe véve a belső margókat
a outerHeight metódus,
amely lehetővé teszi elemek magasságának lekérését és módosítását, figyelembe véve a margókat és a szegélyt
a css metódus,
amely lehetővé teszi elemek CSS stílusainak lekérését és módosítását