Método height() de jQuery

jQuery HTML/Métodos CSS

El método height() obtiene o establece la altura del elemento seleccionado.

Cuando se utiliza el método height() paraObteneraltura, devolveráel primer elemento seleccionadoaltura.

Cuando se utiliza el método height() paraEstablecerAl establecer la altura, estableceráTodos los elementos seleccionadosaltura.

Como se muestra en la imagen siguiente, el método height() no incluye padding, border o margin:

El valor de altura también puede ser relativo. Si se proporciona un valor con un prefijo+=o-=secuencia de caracteres, se calcula la altura objetivo sumando o restando el valor dado desde el valor actual (por ejemplo height("+ = 50"））。

Sintaxis:

Obtener altura:

$(selector).height()

Establecer altura:

$(selector).height(value)

Establecer altura usando una función:

$(selector).height(function(index, currentHeight))

Ejemplo

Obtener la altura del elemento DIV:

$("div").click(function(){
　　$(this).height();
});

Establecer la altura de todos los párrafos:

$("button").click(function(){
　　$("p").height(50);
});

Establecer la altura de todos los párrafos con diferentes unidades:

$("#btn1").click(function(){
　　$("p").height(50);
});
$("#btn2").click(function(){
　　$("p").height("7em");
});
$("#btn3").click(function(){
　　$("p").height("100vh");
});

Al hacer clic en el botón, aumentar la altura de todos los párrafos (usar función):

$("button").click(function(){
　　$("p").height(function(i, val){
　　　　return val　*　2;
　　});
});

El método height() también puede encontrar la altura de la ventana y el documento:

$(window).height();//　Devolver la altura de la ventana del navegador
$(document).height();　　//　Devolver la altura del documento HTML

Mostrar la diferencia entre width()，height()，innerHeight()，innerWidth()，outerWidth() y outerHeight():

$("button").click(function(){
　　$("div").width();
　　$("div").innerWidth();
　　$("div").outerWidth();
　　$("div").height();
　　$("div").innerHeight();
　　$("div").outerHeight();
});

Añadir efecto de desplazamiento suave al desplazar la página del usuario:

let size = $(".main").height();　//　Obtener la altura de ".main"
$(window).keydown(function(event)　{
　　if(event.which　===　40)　{　//　Si se presiona la tecla de flecha hacia abajo
　　　　$("html,　body").animate({scrollTop:　"+="　+　size},　300);
　　}　38)　{　//　Si se presiona la tecla de flecha hacia arriba
　　　　$("html,　body").animate({scrollTop:　"-="　+　size},　300);
　　}
});

Valor del parámetro

jQuery HTML/Métodos CSS