Metoda innerHeight

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

Sintaxă

Obținerea înălțimii elementului. În unele cazuri valorile obținute pot fi fracționale:

$(selector).innerHeight();

Pentru a modifica înă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).innerHeight(valoare nouă);

De asemenea, putem aplica o funcție dată 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 specificate 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).innerHeight(function(index în set, valoare curentă a înălțimii));

Exemplu

Pentru comparație, să afișăm informații despre înălțimea paragrafului #test, obținută cu metodele height și innerHeight:

<p id="test">text</p>
<p id="out1"></p>
<p id="out2"></p>

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

let h1 = $('#test').height();
let h2 = $('#test').innerHeight();

$('#out1').text(h1);
$('#out2').text(h2);

Vom vedea o diferență de 10px, care reprezintă suma padding-ului nostru superior și inferior.

Vezi și

metoda height,
care permite obținerea și modificarea înălțimii elementului
metoda outerHeight,
care permite obținerea și modificarea înălțimii elementului, luând în considerare padding-ul și bordura acestuia