Obtener altura en jQuery

En esta publicación, hablaremos sobre los métodos jQuery para obtener la altura del elemento especificado.

Obtener altura en jQuery

jQuery proporciona tres métodos diferentes para obtener la altura de un elemento jQuery, .height(), .innerHeight() o .outerHeight(). Según el requisito, puede elegir cualquiera de estos métodos para obtener la altura de un elemento jQuery.

jQuery ayuda a obtener la altura calculada actual para el primer elemento del grupo de elementos coincidentes utilizando estos métodos. Primero comprendamos la diferencia entre estos métodos.

1. .height() - Método jQuery integrado que devuelve la altura del elemento excluyendo el borde, el relleno y el margen. Este método no acepta ningún argumento de entrada.
2. .innerHeight(): método integrado de jQuery que devuelve la altura del elemento, incluido el relleno pero excluyendo el margen y el borde. Este método no acepta ningún argumento de entrada.
3. .outerHeight(): método integrado de jQuery que devuelve la altura del elemento div, incluido el borde pero excluyendo el margen. Este método acepta un valor booleano como argumento de entrada, que indica si se debe incluir un margen o no.
4. .outerHeight(true): método integrado de jQuery que devuelve la altura del div, incluido el margen.

Sintaxis:

.height().innerHeight().outerHeight(val boolean)

La única diferencia entre .height() y .css("height") es que el primero devuelve un valor de píxel sin unidades (por ejemplo, 250), mientras que el segundo devuelve un valor con unidades intactas (por ejemplo, 250px). El método .height() se recomienda cuando utiliza la altura de un elemento en un cálculo matemático.

El .height() siempre devuelve la altura del contenido, independientemente del valor de la propiedad de tamaño de cuadro CSS. Esto puede requerir obtener la altura de la propiedad CSS más el tamaño del cuadro y luego restar todos los bordes potenciales y el relleno para cada elemento si el elemento tiene el tamaño del cuadro: border-box.

Use .css( "altura") en lugar de .altura(), para evitar esto.

Entendámoslo con un ejemplo simple a continuación.

<button id="para">Get Height</button>
<p>
  Hello Users
</p>

p {
  border: 1px black solid;
  margin: 3px;
  padding: 5px;
}

$('#para').on('click', () => {
  console.log('height', $('p').height());
  console.log('Inner height', $('p').innerHeight());
  console.log('Outer height', $('p').outerHeight());
});

En el ejemplo anterior, hemos definido la etiqueta de párrafo con un borde de 1px, un margen de 3px y un relleno de 5px. Una vez que el usuario haga clic en el botón para obtener la altura de la etiqueta de párrafo, obtendrá el .height() de la etiqueta p, excluyendo el borde, el relleno y el margen.

El método .innerHeight() obtendrá la altura de la etiqueta de párrafo con el relleno, y el método .outerHeight() obtendrá la altura de la etiqueta de párrafo con el borde y el margen.

Intente ejecutar el fragmento de código anterior en cualquier navegador que admita jQuery, que mostrará el resultado a continuación.

"height", 18.4
"Inner height", 28.4
"Outer height", 30.4

Manifestación