Como extrair altura e largura de um elemento HTML com JavaScript

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

Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

• 118 aulas
• 4 projetos
• 9h 33min

Conhecer formação

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!