jQuery height(): Modificar y obtener la altura de los elementos

Post para repasar el método de jQuery height() que sirve para modificar y obtener la altura de los elementos de la web como puede ser un div, clases o etiquetas.

Antes de ver la sintaxis os pongo unos post con temática similar:

• jQuery animate(): Animaciones modificando estilos CSS
• jQuery width(): Modificar y obtener la altura de los elementos
• jQuery innerWidth() y outerWidth(): Obtener el ancho de elementos
• jQuery innerHeight() y outerHeight(): Obtener la altura de elementos
• Obtener el ancho y alto de elementos con jQuery
• jQuery offset(): Obtener o establecer las coordenadas de un elemento

Sintaxis de jQuery height()

Veamos la sintaxis de esta función de jQuery extraída de su web oficial:

$(selector).height()

$(selector).height(valor)

Os explico las 2 sintaxis:

• En la primera sintaxis obtenemos el alto del elemento especificado en el selector.
• La segunda sirve para modificar la altura del elemento especificado en el selector.

Ejemplo de jQuery height() para obtener el ancho de un div

Vamos con el primer ejemplo de jQuery height() para obtener el ancho de un elemento de la web, en este caso el de un div:

$(document).ready(function(){
  $("#boton").click(function(){
      alert('La altura del div es de: ' + $("#elemento").height() + 'pixels');
 }); 
});

En el código superior:

• detectamos el click en el inputo con id = boton.
• Mostramos en pantalla con un alert la altura en pixels del elemento div con id = elemento.

El código HTML del ejemplo es el siguiente:

<div id="elemento">
 <p id="parrafo">Esto es un texto en un párrafo de un div</p>
</div>
<p><input id="boton" type="button" value="Obtener altura"></p>

Ejemplo de jQuery height() modificar el ancho de un div

Vamos con el segundo ejemplo de jQuery height() para modificar la altura de un elemento de la web, en este caso el de un div:

$(document).ready(function(){
  $("#boton").click(function(){
      $("#elemento").height(150);
 }); 
});

En el código superior:

• Detectamos el click en el inputo con id = boton.
• Modificamos el alto a 150 pixels del elemento div con id = elemento.

El código HTML del ejemplo es mismo del ejemplo anterior.