JS: Como obter a posição do elemento na tela (X,Y)
Neste artigo veremos como obter a posição do elemento na tela utilizando o JavaScript, que nos proporcionará as coordenadas exatas que o elemento se encontra.
Este conteúdo está disponível também em vídeo:
Fala programador(a), bora para aprender coisa nova?
Com o JavaScript conseguimos fazer praticamente tudo no navegador, obter a posição de um elemento é uma de suas funcionalidades
Para isso vamos utilizar um método chamado getBoundingClientRect e acessar suas propriedades
Que conterão valores das coordenadas de onde o elemento está, observe o código:
<!DOCTYPE html>
<html>
<head>
<title>Como obter a posição do elemento na tela</title>
</head>
<body>
<div id="box"></div>
</body>
</html>
Formação Claude Code
Domine Claude Code do absoluto zero até o avançado
- 116 aulas
- 4 projetos
- 9h 23min
E o CSS:
#box {
width: 50px;
height: 50px;
position: absolute;
top: 100px;
left: 45px;
background-color: red;
}
Imprime o seguinte resultado na tela:
E agora vamos ao JavaScript para encontrar a posição do elemento com id box, conforme nosso HTML:
// seleciona elemento
let el = document.getElementById('box');
// utiliza método
let elCoordenadas = el.getBoundingClientRect();
// verificar as propriedades com as coord
console.log(elCoordenadas);
Bem simples, selecionamos o elemento e depois inserimos em uma variável o valor do método getBoundingClientRect
Quer se especializar em Desenvolvimento Web? Veja o nosso catálogo de cursos.
Esta variável contem agora as posições do elemento e suas coordenadas x e y, veja o resultado de console.log:
Agora que obtemos a posição do elemento na tela basta você utilizar da forma que for necessário para resolver o seu problema 😀
Conclusão
Neste artigo vimos como obter a posição do elemento na tela
Basicamente selecionamos o elemento que queremos obter as posições
E depois com a ajuda do método getBoundingClientRect, nós temos acessos a propriedades que nos dão as coordenadas
E não só isso, suas distâncias de top, left, right e bottom
Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube
Nova seção: "Coordenadas da viewport x coordenadas da página:" explicando que o retorno do getBoundingClientRect é relativo à área visível do navegador, não ao documento inteiro. Ou seja: se a página estiver rolada, os valores mudam. Mostrar em bloco de código como somar o deslocamento da rolagem (window.scrollX e window.scrollY) para chegar na posição do elemento em relação ao documento, e explicar em uma frase por que isso importa (posicionar algo em cima do elemento mesmo depois do usuário rolar a tela)
Nova seção: "E as propriedades offsetTop e offsetLeft?" com a comparação lado a lado: offsetTop e offsetLeft dão a distância em relação ao elemento pai posicionado, o getBoundingClientRect dá a caixa completa em relação à área visível. Fechar com uma linha de quando usar cada um
Nova seção prática: "Exemplo prático: posicionando um tooltip em cima do elemento" com um bloco de código curto que pega as coordenadas do elemento e usa top e left para posicionar uma segunda div do lado dele. Nada de teoria nova, só o uso real do que já foi ensinado
Nova seção de troubleshooting: "Caso os valores voltem todos como zero:" listando as causas mais comuns em linhas curtas: elemento escondido (display none), script rodando antes do elemento existir no HTML, e elemento sem tamanho renderizado. Manter o tom de antecipação de erro, com o aviso de rodar o script depois do elemento ou dentro do evento de carregamento da página
Nova seção: "Os valores mudam: recalculando em scroll e resize" explicando que o retorno é uma foto do momento da chamada, não um valor que se atualiza sozinho, e que pra acompanhar é preciso chamar o método de novo quando a página rola ou a janela muda de tamanho. Bloco de código curto com o listener e a chamada dentro dele
Atualizar o estilo do código para o padrão atual: const em vez de let onde a variável não muda, e document.querySelector(‘#box’) como alternativa mostrada ao lado do document.getElementById(‘box’). Manter o exemplo original visível e só acrescentar a versão moderna em uma linha comentada, sem reescrever a explicação
Nova seção: "Só quero saber se o elemento apareceu na tela?" apontando que, quando o objetivo é apenas detectar a entrada do elemento na área visível (animação ao rolar, carregamento de imagem sob demanda), existe o IntersectionObserver, que observa isso sem ficar recalculando posição a cada rolagem. Só o ponteiro conceitual e quando faz sentido, mantendo o foco do post no getBoundingClientRect
Leia também
Matheus Battisti
Formações
Formação Vibe Coding
Do Prompt ao Produto: Crie Software Real com IA
- 474 aulas
- 20 projetos
- 39h 27min
Blog | Mais populares
As diferenças de var, let e const
Como redirecionar para outra página com JavaScript
Exercícios de lógica de programação JavaScript com gabarito
Quais são os melhores exercícios lógica de programação JavaScript? Colocar em prática os exercícios de lógica de programação em JavaScript é de extrema importância para […]
certo, mas queria usar essas coordenadas para puxar o usuario ao clicar algum botão para o local, como eu fazeria isso?
se você quer fazer o um menu de ancoragem, por exemplo, só use a tag <a href=””> ai dentro do href tu coloca o id da div, section, ou seja lá oque tu queira puxar (se o elemento nao tiver id coloque um), mas lembre coloque nessa sintaxe #eonomedoid dentro do href e use id, dessa forma funciona, eu tentei com class e nao foi então use o id que funciona.