Obtenha a altura do elemento div em JavaScript

Obter a altura do elemento div em JavaScript é muito útil na aplicação de um layout adequado ao Modelo de Objetos do Documento (DOM), que faz com que um site se destaque e resulta em atrair a atenção do usuário. Por exemplo, criando uma página ou site da Web específico, os recursos e funcionalidades adicionados exigem que a formatação adequada seja acumulada sem alterar o design do documento.

Este artigo demonstrará as abordagens para obter a altura do elemento div em JavaScript.

Como obter a altura do elemento div em JavaScript?

As seguintes abordagens podem ser utilizadas para obter a altura do elemento div em JavaScript:

• ““OffsetHeight" Propriedade.
• ““ClientHeight" Propriedade.
• ““ScrolHeight" Propriedade.
• ““jQuery" Abordagem.

Abordagem 1: Obtenha a altura do elemento div em JavaScript usando a propriedade OfsethEight

O "OffsetHeight”Propriedade retorna a altura externa de um elemento, incluindo o preenchimento e as fronteiras. Esta propriedade pode ser implementada para calcular a altura do cabeçalho acessado no botão Clique.

Sintaxe

elemento.OffsetHeight

Aqui, "elemento”Corresponde ao elemento a ser calculado para a altura.

Exemplo

No exemplo abaixo:

• Especifique a seguinte div com uma classe designada.
• Além disso, inclua o cabeçalho especificado para ser calculado para o “altura”.
• Agora, crie um botão com um “ONCLICKEvento invocando a função DivHeight ().
• Depois disso, aloque os títulos para exibir a altura calculada:

Este é o site Linuxhint

Obtenha a altura do elemento div

A altura do elemento div é:

No código JS adicional:

• No código JS abaixo, declare uma função chamada “DivHeight ()”.
• Em sua definição, acesse a div atribuída por sua classe usando o “documento.QuerySelector ()”Método e o cabeçalho para a altura calculada usando o“documento.getElementById ()”Método.
• Depois disso, aplique o “OffsetHeight”Propriedade para calcular a altura externa do cabeçalho especificado e exibi -lo no cabeçalho alocado discutido antes de usar o“InnerText" propriedade:

função divHeight ()
Deixe getdiv = documento.QuerySelector ('.elemento');
Let Get = Document.getElementById ("cabeça")
Deixe altura = getdiv.fora do peso;
pegar.INnerText = +altura

Saída

Na saída acima, é evidente que a altura é calculada.

Abordagem 2: Obtenha a altura do elemento div em JavaScript usando a propriedade ClientHeight

O "ClientHeightPropriedade, por outro lado, calcula a altura interna do elemento, incluindo o preenchimento, mas excluindo as fronteiras. Esta propriedade pode ser aplicada da mesma forma à imagem incluída no elemento div.

Sintaxe

elemento.ClientHeight

Aqui, da mesma forma “elemento”Corresponde ao elemento a ser calculado para a altura.

Exemplo

• Repita as abordagens discutidas acima para especificar o “div" aula.
• Aqui, especifique a seguinte imagem a ser calculada para o “altura”.
• Da mesma forma, aloque um cabeçalho para a altura computada e crie um botão com um evento anexado “ONCLICK”Conforme discutido:

A altura do elemento div é:

Obtenha a altura do elemento div

Na função JS abaixo dada:

• Defina uma função chamada “DivHeight ()”.
• Repita as abordagens discutidas acima para acessar o “div”Elemento e o cabeçalho incluído.
• Depois disso, aplique o “ClientHeight”Propriedade para calcular a altura externa da imagem especificada no código acima e devolvê -lo como um título:

função divHeight ()
Deixe Box = documento.QuerySelector ('.elemento');
Let Get = Document.getElementById ('cabeça')
Deixe a altura = caixa.ClientHeight;
pegar.INnerText = +altura

Saída

Da saída acima, pode -se observar que a funcionalidade necessária é alcançada.

Abordagem 3: Obtenha a altura do elemento div em JavaScript usando a propriedade ScrolHeight

O "ScrolHeight”A propriedade é idêntica à“ClientHeight”Propriedade ao retornar a altura de um elemento com o preenchimento, mas não as fronteiras. Esta propriedade pode ser aplicada à tabela criada para calcular sua altura.

Sintaxe

elemento.ScrolHeight

Na sintaxe dada, “elemento”Da mesma forma corresponde ao elemento a ser calculado para a altura.

Exemplo

• Em primeiro lugar, inclua o “div”Elemento com o especificado“aula”E um anexo“OnMouseOverEvento redirecionando para a função DivHeight ().
• Em seguida, crie uma tabela com o cabeçalho especificado e os valores de dados.
• Da mesma forma, revive o método discutido para alocar um cabeçalho para exibir a altura calculada:

EU IA.	Nome	Idade
1	atormentar	18
2	David	46

No código JS a seguir, siga as etapas declaradas:

• Defina a função chamada “DivHeight ()”.
• Acesse o "div" elemento.
• Finalmente, aplique o “ScrolHeight”Propriedade para devolver a altura da tabela criada:

função divHeight ()
Deixe getdiv = documento.QuerySelector ('.elemento');
Deixe altura = getdiv.ScrolHeight;
console.log ("A altura do elemento div é:", +altura)

Saída

Abordagem 4: Obtenha a altura do elemento div em JavaScript usando a abordagem jQuery

Essa abordagem retorna a altura do cabeçalho, bem como o parágrafo dentro do elemento div com a ajuda de uma biblioteca jQuery.

Exemplo

• Na demonstração abaixo, inclua a biblioteca jQuery especificada para aplicar seus métodos.
• Em seguida, especifique o “div”E contém o seguinte cabeçalho e parágrafo nele para serem calculados para a altura.
• Depois disso, revive os métodos discutidos para criar um botão e atribuir um título para que a altura resultante seja exibida nele:

JavaScript

O JavaScript é uma linguagem de programação muito eficaz que pode ser integrada ao HTML também para executar várias funcionalidades adicionais ao projetar uma página da web específica ou o site. Isso resulta em atrair os usuários e aprimorar o design geral de documentos.


Obtenha a altura do elemento div

No código abaixo:

• No código jQuery, aplique o “preparar()”Método para executar o código adicional assim que o modelo de objeto de documento (DOM) for carregado.
• Agora, aplique o “clique()”Método que executará a função especificada no botão Clique
• Por fim, após o clique do botão, acesse o “div”Elemento e aplique o“altura()”Método para ele retornando assim sua altura:

$ (documento)
.pronto (function ()
$ ("botão").clique (function ()
var divHeight = $ ("#elemento").altura();
$ ("#resultado").html ("A altura do elemento div é:" + divheight);
);
);

Saída

Este artigo compilou as abordagens para obter a altura do elemento div em JavaScript.

Conclusão

O "OffsethethetT ”propriedade, a“ClientHeight”Propriedade, a“ScrolHeight”Propriedade, ou a“jQuery”A abordagem pode ser utilizada para obter a altura do elemento div em JavaScript. A propriedade OffSetHeight pode ser aplicada para calcular a altura externa do cabeçalho acessado no botão Clique. A propriedade ClientHeight e a propriedade ScrolHeight podem ser optadas por calcular a altura interna do elemento. A abordagem jQuery também pode ser implementada incluindo sua biblioteca e utilizando seus métodos para realizar os cálculos necessários. Este artigo demonstrou as abordagens que podem ser aplicadas para obter a altura do elemento div em JavaScript.