jQuery

jQuery innerHeight() y outerHeight(): Obtener la altura de elementos

Repaso a las funciones de jQuery innerHeight() y outerHeight(), la funcionalidad de estas es la de obtener el alto de los elementos de la web contemplando los márgenes.

Otras funciones similares en jQuery son:

Representación gráfica de jQuery innerHeight() y outerHeight()

La funcionalidad de innerHeight() es la de obtener el alto de un elemento teniendo en cuenta el padding (margen interno) pero no el borde. Si nos fijamos en la imagen sería la anchura del elemento + padding.

La funcionalidad de outerHeight() es la de obtener el alto de un elemento teniendo en cuenta el padding (margen interno) incluyendo el borde. Si nos fijamos en la imagen sería la anchura del elemento + padding + borde.

Sintaxis de jQuery innerHeight()

Veamos la sintaxis extraída de su página web oficial:

$(selector).innerHeight()

Tal y como podéis apreciar la sintaxis es sentilla, tan solo consta de un selector para especificar el elemento del cual queremos obtener el alto.

Sintaxis de jQuery outerHeight()

Veamos la sintaxis extraída de su página web oficial:

$(selector).outerHeight()

Tal y como podéis apreciar la sintaxis es sentilla, tan solo consta de un selector para especificar el elemento del cual queremos obtener el ancho.

Ejemplo de jQuery innerHeight()

Vamos con este ejemplo de jQuery innerHeight():

$(document).ready(function(){
  $("#boton").click(function(){
      alert('El alto del div es de: ' + $("#parrafo").innerHeight() + 'pixels');
 }); 
});

Os explico el ejemplo :

Detectamos el click en el elemento con id= ‘boton’.
Sacamos con ‘alert’ un mensaje por pantalla con el tamaño del elemento con id= ‘parrafo’.

El código HTML de los botones y el párrafo es el siguiente:

<div id="elemento">
 <p id="parrafo" style="width:180px; height:55px; padding: 5px 0 5px 0;">Esto es un texto en un párrafo de un div</p>
</div>

<p><input id="boton" type="button" value="Obtener alto"></p>

Si os fijáis el mensaje que sale por pantalla muestra que el alto son 65 pixels, se debe a la suma de los 55 del párrafo más los 5+5 del padding.

Ejemplos de jQuery outerHeight()

Turno para el ejemplo de jQuery outerHeight():

$(document).ready(function(){
  $("#boton").click(function(){
      alert('El alto del div es de: ' + $("#parrafo").outerHeight() + 'pixels');
 }); 
});

Os explico el ejemplo :

Detectamos el click en el elemento con id= ‘boton’.
Sacamos con ‘alert’ un mensaje por pantalla con el tamaño del elemento con id= ‘parrafo’.

El código HTML de los botones y el párrafo es el siguiente:

<div id="elemento">
 <p id="parrafo" style="width:180px; padding: 5px 0 5px 0; border: 2px solid;">Esto es un texto en un párrafo de un div</p>
</div>

<p><input id="boton" type="button" value="Obtener alto"></p>

Si os fijáis el mensaje que sale por pantalla muestra que el ancho son 69 pixels, se debe a la suma de los 55 del párrafo más los 5+5 del padding y los 2 + 2 del ancho del borde.