Metod outerHeight

Metod outerHeight omogućava da se dobije i promeni visina elementa uzimajući u obzir unutrašnje odstupanja, granicu i selektivno - spoljašnje odstupanja elementa. Važno je zapamtiti da ćemo dobijati 'izračunatu vrednost' visine (computed height). Greške u izračunavanju takođe mogu nastati, ako korisnik menja veličine stranice, kao i, ako je element ili njegov roditelj skriven.

Sintaksa

Tako možemo dobiti visinu elementa. Ovaj metod može prihvatati opcioni parametar u vidu true ili false (false je podrazumevano), zavisno od toga - da li će se uračunavati spoljašnja odstupanja ili ne. U nekim slučajevima dobijene vrednosti mogu biti razlomljene:

javascript$(selektor).outerWidth([uključujući_margin]);

Da bismo promenili širinu elementa - možemo proslediti jednostavno broj (na primer 400), tada će jedinice merenja biti pikseli, ili string, sa naznakom jedinica merenja (na primer '10em'):

javascript$(selektor).outerHeight(nova vrednost, [uključujući_margin]);

Takođe možemo primeniti zadatu funkciju na svaki element u skupu. Pritom će prvi parametar funkcija dobiti broj elementa u skupu, a drugi parametar - trenutnu vrednost zadate visine za konkretni element. this unutar funkcije će ukazivati na trenutni element. Vrednost širine elementa će se promeniti u onu, koju vrati funkcija:

javascript$(selektor).outerHeight(function(broj u skupu, trenutna vrednost visine));

Primer

Hajde za poređenje da prikažemo informaciju o visini pasusa #test, dobijenoj metodima height, innerHeight i outerHeight:

html<p id="test">tekst</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);

Pogledajte takođe