Método innerHeight

El método innerHeight permite obtener y modificar la altura del elemento teniendo en cuenta su relleno interno. Es importante recordar que obtendremos el 'valor calculado' de la altura (computed height). Los errores en el cálculo también pueden ocurrir si el usuario cambia el tamaño de la página, o si el elemento o su padre están ocultos. El valor de la altura no tiene en cuenta el grosor del borde del elemento.

Sintaxis

Obtener la altura del elemento. En algunos casos los valores obtenidos pueden ser fraccionarios:

$(selector).innerHeight();

Para cambiar la altura del elemento - se puede pasar simplemente un número (por ejemplo 400), entonces las unidades de medida serán píxeles, o una cadena, con la indicación de las unidades de medida (por ejemplo '10em'):

$(selector).innerHeight(nuevo valor);

También podemos aplicar una función determinada a cada elemento del conjunto. En este caso, el primer parámetro de la función recibirá el índice del elemento en el conjunto, y el segundo parámetro - el valor actual de la altura establecida para el elemento específico. this dentro de la función apuntará al elemento actual. El valor de la altura del elemento cambiará al que devuelva la función:

$(selector).innerHeight(function(índice en el conjunto, valor actual de la altura));

Ejemplo

Para comparar, mostremos información sobre la altura del párrafo #test, obtenida por los métodos height y innerHeight:

<p id="test">text</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 una diferencia de 10px, que es la suma de nuestros rellenos superior e inferior.

Véase también

método height,
que permite obtener y modificar la altura del elemento
método outerHeight,
que permite obtener y modificar la altura del elemento, teniendo en cuenta su relleno y borde