Метод height

Методът height позволява получаване и промяна на височината на елемент. Важно е да запомните, че ще получаваме 'изчислената стойност' на височината (computed height). За разлика от метода css('height'), той връща безразмерна величина (например 400) и е удобен за математически изчисления. Методът получава височината на съдържанието на елемента, независимо от задаването на CSS свойството box-sizing. За да избегнете допълнителни изчисления, се препоръчва да използвате css('height'). Грешки в изчислението могат да възникнат също, ако потребителят променя размерите на страницата, както и ако елементът или неговият родител са скрити. Стойността на височината не взема предвид стойностите на отстъпите и рамката.

Синтаксис

Получаване на височината на елемент. В някои случаи получените стойности могат да бъдат дробни:

$(селектор).height();

За да промените височината на елемент - можете да подадете просто число (например 400), тогава мерните единици ще бъдат пиксели, или низ, с указание на мерните единици (например '10em'):

$(селектор).height(нова стойност);

Също така можем да приложим зададена функция към всеки елемент в набора. При това първият параметър функцията ще получи номера на елемента в набора, а вторият параметър - текущата стойност на зададената височина за конкретния елемент. this във функцията ще сочи към текущия елемент.

Стойността на височината на елемента ще се промени на тази, която върне функцията:

$(селектор).height(function(номер в набор, текуща стойност на височината));

Пример

Нека при клик върху #test да променим неговата височина на стойност 30px, използвайки метода height, както и с помощта на css да променим фона му на зелен:

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

Вижте също

метод width,
който позволява получаване и промяна на ширината на елемент
метод innerHeight,
който позволява получаване и промяна на височината на елемент, като взема предвид неговите вътрешни отстъпи
метод outerHeight,
който позволява получаване и промяна на височината на елемент, като взема предвид неговите отстъпи и граница
метод css,
който позволява получаване и промяна на CSS стилове на елемент