Metoda outerHeight

Metoda outerHeight omogoča pridobivanje in spreminjanje višine elementa z upoštevanjem notranjih odmikov, obrobe in izbirno - zunanjih odmikov elementa. Pomembno je zapomniti, da bomo dobili 'izračunano vrednost' višine (computed height). Napake pri izračunu se lahko pojavijo tudi, če uporabnik spremeni velikost strani ali če je element ali njegov starš skrit.

Sintaksa

Tako lahko dobimo višino elementa. Ta metoda lahko sprejme neobvezen parameter v obliki true ali false (false je privzeto), odvisno od tega, ali bodo upoštevani zunanji odmiki ali ne. V nekaterih primerih so lahko dobljene vrednosti delne:

$(selektor).outerWidth([vključno_margin]);

Za spremembo višine elementa - lahko podamo preprosto število (na primer 400), potem bodo enote meritve slikovne pike, ali niz z navedbo enot merjenja (na primer '10em'):

$(selektor).outerHeight(nova vrednost, [vključno_margin]);

Prav tako lahko uporabimo določeno funkcijo za vsak element v nizu. Pri tem funkcija kot prvi parameter prejme številko elementa v nizu, kot drugi parameter pa - trenutno vrednost določene višine za posamezen element. this znotraj funkcije bo kazal na trenutni element. Vrednost višine elementa se bo spremenila na tisto, ki jo vrne funkcija:

$(selektor).outerHeight(function(številka v nizu, trenutna vrednost višine));

Primer

Za primerjavo izpišimo informacije o višini odstavka #test, pridobljene z metodami height, innerHeight in 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);

Glejte tudi

metoda height,
ki omogoča pridobivanje in spreminjanje višine elementa
metoda innerHeight,
ki omogoča pridobivanje in spreminjanje višine elementa, z upoštevanjem njegovih notranjih odmikov