Metoda height

Metoda height permite obținerea și modificarea înălțimii unui element. Este important să rețineți că vom obține 'valoarea calculată' a înălțimii (computed height). Spre deosebire de metoda css('height'), aceasta returnează o valoare fără unitate de măsură (de exemplu 400) și este utilă în calculele matematice. Metoda obține înălțimea conținutului elementului, indiferent de setarea proprietății CSS box-sizing. Pentru a evita calculele inutile, este recomandat să folosiți css('height'). Erori de calcul pot apărea și dacă utilizatorul modifică dimensiunile paginii, sau dacă elementul sau părintele său sunt ascunse. Valoarea înălțimii nu ia în considerare valorile de padding și border.

Sintaxă

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

$(selector).height();

Pentru a modifica înălțimea elementului - puteți transmite un 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).height(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 pentru elementul specific. 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).height(function(index în set, valoare curentă a înălțimii));

Exemplu

Să modificăm la click pe #test înălțimea acestuia la valoarea 30px, folosind metoda height, și de asemenea cu css să îi schimbăm fundalul în verde:

<div id="test"></div>

#test {
	width: 50px; 
	height: 90px;
	background: red; 
	color: white;
	margin-top: 10px; 
	cursor: pointer;
}

$('#test').one('click', function() {
	$(this).height(30).css({
		cursor: 'auto',
		backgroundColor: 'green'
	});
});

Vedeți și

metoda width,
care permite obținerea și modificarea lățimii unui element
metoda innerHeight,
care permite obținerea și modificarea înălțimii unui element, luând în considerare padding-ul intern
metoda outerHeight,
care permite obținerea și modificarea înălțimii unui element, luând în considerare padding-ul și bordura
metoda css,
care permite obținerea și modificarea stilurilor CSS ale unui element