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
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!