outerHeight metódus

A outerHeight metódus lehetővé teszi egy elem magasságának lekérdezését és módosítását, figyelembe véve a belső margókat, a szegélyt és opcionálisan a külső margókat. Fontos emlékezni, hogy az 'elemzett értéket' kapjuk meg a magasságból (computed height). 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.

Szintaxis

Így kérhetjük le egy elem magasságát. Ez a metódus elfogadhat egy opcionális paramétert true vagy false formájában (alapértelmezetten false), attól függően, hogy a külső margókat figyelembe kell-e venni vagy sem. Egyes esetekben a kapott értékek törtek lehetnek:

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

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, a mértékegység megadásával (például '10em'):

javascript$(selector).outerHeight(új érték, [include_margin]);

Egy megadott függvényt is alkalmazhatunk minden elemre a kiválasztott halmazban. Ekkor a függvény első paramétere az elem sorszáma a halmazban, a második paramétere pedig az adott elem aktuális magasságértéke. A this a függvényen belül az aktuális elemre fog mutatni. Az elem magasságértéke a függvény által visszaadott értékre fog változni:

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

Példa

Hasonlításként írassuk ki a #test bekezdés magasságinformációját, amelyet a height, innerHeight és a outerHeight metódusokkal kaptunk:

html<p id="test">szöveg</p>
<p id="out1"></p>
<p id="out2"></p>
<p id="out3"></p>
<p id="out4"></p>

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

javascriptlet 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);

Lásd még