Метод 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 стили элемента