Neste artigo você vai aprender a como extrair altura e largura de um elemento HTML com JavaScript puro, fácil e rápido!
Fala programador(a), beleza? Bora aprender mais sobre DOM, propriedades dos elementos e também JavaScript!
Para conseguir as dimensões de um elemento, primeiramente vamos precisar selecioná-lo
Há vários métodos de seleção, eu gosto muito de querySelector e querySelectorAll
Após a seleção, temos que utilizar um método chamado getBoundingClientRect
Este método nos dará um objeto com valores de propriedades do elemento, largura e altura estarão lá
Veja um exemplo prático:
const elemento = querySelector("#meu-elemento");
console.log(elemento.getBoundingClientRect());
const propriedades = elemento.getBoundingClientRect();
// altura
const altura = propriedades.height;
// largura
const largura = propriedades.width;No código acima selecionamos um elemento com id de #meu-elemento, aqui você deve mudar para o id ou classe que corresponde ao seu elemento alvo
Depois acessamos o método getBoundingClientRect, onde as propriedades do elemento são exibidas
Criamos também variáveis com a propriedade width e height, largura e altura respectivamente
Algumas das propriedades que o método nos retorna são:
- bottom;
- height;
- left;
- right;
- top;
- width;
- x;
- y;
Todas estas tem alguma utilidade quando precisamos saber o tamanho de um elemento ou como ele está posicionado na nossa tela
Conclusão
Neste artigo você aprendeu a como extrair altura e largura de um elemento HTML com JS puro
Primeiramente selecionamos o elemento com algum método do DOM
Depois basta acessar o método getBoundingClientRect, ele nos retorna propriedades como height (altura) e width (largura)
Confira nossos cursos gratuitos no Youtube, com vídeos todos os dias!
Se inscreva e ative o sininho para receber as notificações e aprender mais ainda sobre desenvolvimento web!
Veja também nosso catálogo de cursos na Udemy, todos com exercícios e projetos práticos, nas mais diversas tecnologias
O link acima contém um cupom de desconto para os cursos!