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

pegar a altura de uma div com JavaScript capa

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

Primeiramente precisamos selecionar o elemento que desejamos obter as suas propriedades

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!

Inscrever-se
Notificar de
guest

0 Comentários
mais antigos
mais recentes Mais votado
Feedbacks embutidos
Ver todos os comentários