Como pegar a altura de uma div com JavaScript

Neste artigo você vai aprender a como pegar a altura de uma div com JavaScript, ou seja, obter o valor da propriedade height da div

Fala programador(a), beleza? Bora aprender mais a lidar com elementos em JavaScript!

Primeiramente precisamos selecionar o elemento que desejamos obter as suas propriedades

Formação Recomendada

Formação Vibe Coding

Do Prompt ao Produto: Crie Software Real com IA

• 474 aulas
• 20 projetos
• 39h 27min

Conhecer formação

Isso pode ser feito com vários métodos, alguns deles são:

• querySelector;
• getElementById;
• getElementsByClassName;
• getElementsByTagName;
• getElementsByName

Na minha opinião, querySelector resolve bem o problema, pois basta passar o seletor de CSS do elemento

Depois disso, temos duas opções de propriedades para selecionar a altura:

• clientHeight: altura + padding;
• offsetHeight: altura + padding + barra de scroll e bordas;

Escolha a que você deseja, e aplique um snippet semelhante ao abaixo:

const element = document.querySelector("#my-div")

const elementHeight = element.clientHeight;

console.log(elementHeight) // 18

Altere apenas os valores de seletor de elemento e propriedade para as que você deseja, e pronto!

Quer aprender mais sobre JavaScript? Confira o vídeo abaixo:

Conclusão

Neste artigo você aprendeu a como pegar a altura de uma div com JavaScript

Utilizamos um método de seleção de elementos no DOM, e depois bastou utilizar uma das propriedades citadas (clientHeight, offsetHeight)

As duas possuem diferenças distintas, que devem ser levadas em consideração antes de serem utilizadas

Deseja programar de forma profissional? Confira o nosso treinamento completo clicando aqui.

Uma plataforma de cursos com projetos completos, comunidade de alunos e muito mais!

Há também o nosso canal no YouTube, com muito conteúdo gratuito de qualidade!