Método height() do jQuery

jQuery HTML/Métodos de CSS

O método height() obtém ou define a altura do elemento selecionado.

Quando o método height() é usadoObterao definir a altura, ele retornao primeiro elemento selecionadoaltura.

Quando o método height() é usadoDefinirao definir a altura, ele defineTodos os elementos selecionadosaltura.

Como mostrado na figura a seguir, o método height() não inclui padding，border ou margin：

A altura também pode ser relativa. Se um valor for fornecido com um prefixo+=ou-=sequência de caracteres, a altura alvo é calculada adicionando ou subtraindo o valor dado do valor atual (por exemplo, height("+ = 50"））。

Sintaxe：

Obter altura：

$(selector).height()

Definir altura：

$(selector).height(value)

Definir altura usando função：

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

Exemplo

Obter a altura do elemento DIV：

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

Definir a altura de todos os parágrafos：

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

Definir a altura de todos os parágrafos com diferentes unidades：

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

Ao clicar no botão, aumentar a altura de todos os parágrafos (usar função):

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

O método height() também pode encontrar a altura da janela e do documento：

$(window).height();//　Retornar a altura da janela do navegador
$(document).height();　　//　Retornar a altura do documento HTML

Mostrar a diferença entre width()，height()，innerHeight()，innerWidth()，outerWidth() e outerHeight():

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

Adicionar efeito de rolagem suave ao rolar a página do usuário：

let size = $(".main").height();　//　Obter "main" Altura
$(window).keydown(function(event)　{
　　if(event.which　===　40)　{　//　Se pressionar a Tecla de Seta para Baixo
　　　　$("html,　body").animate({scrollTop:　"+="　+　size},　300);
　　}　else　if(event.which　===　38)　{　//　Se pressionar a Tecla de Seta para Cima
　　　　$("html,　body").animate({scrollTop:　"-="　+　size},　300);
　　}
});

Valor do Parâmetro

jQuery HTML/Métodos de CSS