Metoda height

Metoda height pozwala pobierać i zmieniać wysokość elementu. Ważne jest, aby pamiętać, że będziemy otrzymywać 'obliczoną wartość' wysokości (computed height). W przeciwieństwie do metody css('height'), zwraca ona wartość bez jednostki (na przykład 400) i jest wygodna w obliczeniach matematycznych. Metoda pobiera wysokość treści elementu, niezależnie od zdefiniowania właściwości CSS box-sizing. Aby uniknąć zbędnych obliczeń, zaleca się używanie css('height'). Błędy w obliczeniach mogą również występować, jeśli użytkownik zmienia rozmiary strony, a także, jeśli element lub jego rodzic są ukryci. Wartość wysokości nie uwzględnia wartości marginesów wewnętrznych i obramowania.

Składnia

Pobierz wysokość elementu. W niektórych przypadkach uzyskane wartości mogą być ułamkowe:

$(selektor).height();

Aby zmienić wysokość elementu - można przekazać po prostu liczbę (na przykład 400), wtedy jednostką miary będą piksele, albo ciąg znaków, z podaniem jednostki miary (na przykład '10em'):

$(selektor).height(nowa wartość);

Możemy również zastosować daną funkcję do każdego elementu w zbiorze. Przy tym pierwszym parametrem funkcja otrzyma numer elementu w zbiorze, a drugim parametrem - bieżącą wartość zadanej wysokości dla konkretnego elementu. this wewnątrz funkcji będzie wskazywać na bieżący element.

Wartość wysokości elementu zmieni się na tę, którą zwróci funkcja:

$(selektor).height(function(numer w zbiorze, bieżąca wartość wysokości));

Przykład

Sprawmy, aby po kliknięciu na #test zmienić mu wysokość na wartość 30px, używając metody height, a także za pomocą css zmienić jego tło na zielone:

<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'
	});
});

Zobacz też

metoda width,
która pozwala pobierać i zmieniać szerokość elementu
metoda innerHeight,
która pozwala pobierać i zmieniać wysokość elementu, uwzględniając jego wewnętrzne marginesy
metoda outerHeight,
która pozwala pobierać i zmieniać wysokość elementu, uwzględniając jego marginesy i obramowanie
metoda css,
która pozwala pobierać i zmieniać style CSS elementu