Metoda outerHeight

Metoda outerHeight permite obținerea și modificarea înălțimii elementului cu luarea în considerare a padding-ului, bordurii și selectiv - a marginii elementului. Este important să reținem că vom obține 'valoarea calculată' a înălțimii (computed height). Erori în calcul pot apărea, de asemenea, dacă utilizatorul schimbă dimensiunile paginii, sau dacă elementul sau părintele său sunt ascunse.

Sintaxă

Așa putem obține înălțimea elementului. Această metodă poate primi un parametru opțional sub forma true sau false (false este valoarea implicită), în funcție de faptul dacă vor fi luate în considerare marginile externe sau nu. În unele cazuri valorile obținute pot fi fracționale:

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

Pentru a modifica lățimea elementului - se poate transmite un simplu număr (de exemplu 400), caz în care unitatea de măsură va fi pixeli, sau un șir de caractere, cu specificarea unității de măsură (de exemplu '10em'):

$(selector).outerHeight(noua_valoare, [include_margin]);

De asemenea, putem aplica o funcție definită fiecărui element din set. În acest caz, primul parametru al funcției va primi indexul elementului din set, iar al doilea parametru - valoarea curentă a înălțimii setate pentru elementul respectiv. this în interiorul funcției va îndrepta către elementul curent. Valoarea înălțimii elementului se va schimba în cea returnată de funcție:

$(selector).outerHeight(function(index, valoarea_curenta_a_inaltimii));

Exemplu

Hai să afișăm pentru comparație informații despre înălțimea paragrafului #test, obținută cu metodele height, innerHeight și 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);

Vedeți și

metoda height,
care permite obținerea și modificarea înălțimii elementului
metoda innerHeight,
care permite obținerea și modificarea înălțimii elementului, luând în considerare padding-ul său intern