Neste artigo você vai aprender a como verificar se o elemento está visível pelo DOM com JavaScript, em uma única linha de código
Fala programador(a), beleza? Bora aprender mais sobre DOM e JavaScript!
Para verificar se um elemento está visível na tela através do DOM é simples
Vamos precisar selecionar este elemento, com algum dos métodos de DOM: querySelector, getElementById e etc
Depois disso é necessário comparar a propriedade offsetParent com null
Se um elemento está escondido, será retornado true desta operação, pois o elemento não está visível
Já se for false, o elemento está visível na página
O código completo para atingir este resultado é:
const myElement = document.querySelector("#test")
console.log(myElement.offsetParent === null)
Note que aqui selecionamos um elemento com id de test
E verificamos se o mesmo está ou não visível, se o elemento não existir um erro será retornado
Então você deve apenas utilizar com elementos existentes!
Conclusão
No artigo de hoje você aprendeu a como verificar se o elemento está visível pelo DOM
Utilizamos uma técnica bem simples, que checa uma propriedade e nos retorna se o elemento está ou não visível
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!