Método height

O método height permite obter e alterar a altura de um elemento. É importante lembrar que obteremos o 'valor calculado' da altura (computed height). Diferente do método css('height'), ele retorna um valor sem unidade (por exemplo 400) e é conveniente para cálculos matemáticos. O método obtém a altura do conteúdo do elemento, independentemente da especificação da propriedade CSS box-sizing. Para evitar cálculos desnecessários, é recomendado usar css('height'). Erros no cálculo também podem ocorrer se o usuário alterar o tamanho da página, ou se o elemento ou seu pai estiverem ocultos. O valor da altura não considera os valores de preenchimento e borda.

Sintaxe

Obter a altura do elemento. Em alguns casos os valores obtidos podem ser fracionários:

$(seletor).height();

Para alterar a altura do elemento - pode-se passar simplesmente um número (por exemplo 400), então as unidades de medida serão pixels, ou uma string, com a especificação das unidades de medida (por exemplo '10em'):

$(seletor).height(novo valor);

Também podemos aplicar uma função determinada a cada elemento no conjunto. Neste caso, o primeiro parâmetro da função receberá o índice do elemento no conjunto, e o segundo parâmetro - o valor atual da altura definida para o elemento específico. this dentro da função apontará para o elemento atual.

O valor da altura do elemento mudará para aquele que a função retornar:

$(seletor).height(function(índice no conjunto, valor atual da altura));

Exemplo

Vamos, ao clicar em #test, alterar sua altura para o valor 30px, usando o método height, e também com o css mudar seu fundo para 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'
	});
});

Veja também

método width,
que permite obter e alterar a largura de um elemento
método innerHeight,
que permite obter e alterar a altura de um elemento, considerando seus preenchimentos internos
método outerHeight,
que permite obter e alterar a altura de um elemento, considerando seus preenchimentos e borda
método css,
que permite obter e alterar os estilos CSS de um elemento