JavaScript

Como extrair altura e largura de um elemento HTML com JavaScript

21 de junho de 2021

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!

extrair altura e largura de um elemento HTML capa

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!
Subscribe
Notify of
guest
0 Comentários
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x