Como verificar se o elemento está visível pelo DOM em JavaScript

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!