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:

javascript$(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'):

javascript$(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:

javascript$(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:

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

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

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

Lásd még