Método innerHeight

O método innerHeight permite obter e alterar a altura de um elemento levando em consideração seus preenchimentos internos. É importante lembrar que obteremos o 'valor calculado' da altura (computed height). Erros de cálculo também podem ocorrer se o usuário alterar o tamanho da página, ou se o elemento ou seu elemento pai estiverem ocultos. O valor da altura não considera a espessura da borda do elemento.

Sintaxe

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

$(seletor).innerHeight();

Para alterar a altura do elemento - você pode passar apenas um número (por exemplo, 400), então a unidade de medida será pixels, ou uma string, com a unidade de medida especificada (por exemplo, '10em'):

$(seletor).innerHeight(novo valor);

Também podemos aplicar uma determinada função 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 irá apontar para o elemento atual. O valor da altura do elemento será alterado para aquele retornado pela função:

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

Exemplo

Vamos, para comparação, exibir informações sobre a altura do parágrafo #test, obtida pelos métodos height e innerHeight:

<p id="test">texto</p>
<p id="out1"></p>
<p id="out2"></p>

p {
	margin: 10px;
	padding: 5px;
	border: 2px solid blue;
}

let h1 = $('#test').height();
let h2 = $('#test').innerHeight();

$('#out1').text(h1);
$('#out2').text(h2);

Veremos uma diferença de 10px, que é a soma dos nossos preenchimentos interno superior e inferior.

Veja também

método height,
que permite obter e alterar a altura do elemento
método outerHeight,
que permite obter e alterar a altura do elemento, levando em consideração seus preenchimentos e borda