Método height

El método height permite obtener y modificar la altura de un elemento. Es importante recordar que obtendremos el 'valor calculado' de la altura (computed height). A diferencia del método css('height'), este devuelve un valor sin unidades (por ejemplo 400) y es conveniente para cálculos matemáticos. El método obtiene la altura del contenido del elemento, independientemente de la especificación de la propiedad CSS box-sizing. Para evitar cálculos innecesarios, se recomienda utilizar css('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 elemento padre están ocultos. El valor de la altura no tiene en cuenta los valores de los márgenes y el borde.

Sintaxis

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

$(selector).height();

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

$(selector).height(nuevo valor);

También podemos aplicar una función determinada a cada elemento en el conjunto. En este caso, la función recibirá como primer parámetro el índice del elemento en el conjunto, y como 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).height(function(índice en el conjunto, valor actual de la altura));

Ejemplo

Al hacer clic en #test cambiemos su altura al valor 30px, usando el método height, y también usando css cambiemos su fondo a 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'
	});
});

Véase también

método width,
que permite obtener y modificar el ancho de un elemento
método innerHeight,
que permite obtener y modificar la altura de un elemento, teniendo en cuenta sus rellenos internos
método outerHeight,
que permite obtener y modificar la altura de un elemento, teniendo en cuenta sus márgenes y borde
método css,
que permite obtener y modificar los estilos CSS de un elemento