Como esconder ou exibir elemento com JavaScript

Neste artigo você vai aprender a como esconder ou exibir elemento com JavaScript, utilizando um código super simples!

Fala programador(a), beleza? Bora aprender mais sobre exibição de elementos com JS!

Para esconder ou exibir elementos vamos utilizar uma propriedade do CSS

Porém temos duas opções neste caso, que são:

• visibility: esconde elemento, mas preserva seu espaço;
• display: esconde elemento, e desconsidera seu espaço na página;

A partir da sua escolha de propriedade, vamos selecionar o elemento e alterar o valor da mesma

Simples assim, apenas uma ação no CSS

Veja exemplos de código:

const myElement = document.querySelector("#element")

// Esconde
myElement.style.visibility = "hidden";

// Exibe
myElement.style.visibility = "visible";

// Esconde
myElement.style.display = 'none';

// Exibe
myElement.style.display = 'block';

Note que na primeira linha há a seleção de elementos, você pode utilizar qualquer um dos métodos disponíveis

Alguns deles são:

• querySelector;
• getElementById;
• getElementsByClassName;

A questão é ter apenas o elemento alvo selecionado através do DOM, depois podemos alterar o seu CSS

Na maioria das vezes estaremos alterando a propriedade display, porque precisamos remover o elemento da tela

E o espaço que ele possui pode gerar um problema visual no projeto

Quer aprender mais sobre JavaScript? Confira o vídeo abaixo:

Conclusão

No artigo de hoje você viu como esconder ou exibir elemento com JavaScript

Utilizamos um método de seleção de elementos, para poder resgatar o que precisamos alterar o status de exibição

E depois alteramos a propriedade visibility ou display, que deve ser escolhido de acordo com o projeto

Deseja programar de forma profissional? Confira o nosso treinamento completo clicando aqui.

Uma plataforma de cursos com projetos completos, comunidade de alunos e muito mais!

Há também o nosso canal no YouTube, com muito conteúdo gratuito de qualidade!

Alternar exibição ao clicar (toggle):

Na vida real quase nunca é só esconder OU só exibir, tu quer os dois no mesmo botão

É o caso clássico do menu, do dropdown, do "ver mais"

Pra isso a gente checa o estado atual e inverte, se liga:

const botao = document.querySelector("#botao") const myElement = document.querySelector("#element")

botao.addEventListener("click", () => { if (myElement.style.display === "none") { myElement.style.display = "block" } else { myElement.style.display = "none" } })

A cada clique ele olha como o elemento tá e faz o contrário

Simples e resolve a maioria dos casos =)

Qual usar: visibility ou display?

A dúvida sempre bate na hora, então vamos deixar reto:

visibility: hidden esconde o elemento MAS o buraco dele continua ali ocupando espaço na tela

display: none esconde e some com o espaço também, o resto da página sobe pra ocupar o lugar

Regra de bolso: se tu quer que o layout se reorganize, é display

Se tu quer que o espaço fique reservado (tipo trocar um elemento por outro no mesmo lugar), é visibility

Esconder por classe CSS (o jeito mais organizado):

Mexer no style direto no JS funciona, mas mistura estilo com lógica e a longo prazo vira bagunça

O caminho mais limpo é ter uma classe no CSS e só ligar/desligar ela pelo JS

No CSS:

.escondido { display: none; }

No JS a gente usa o classList:

const myElement = document.querySelector("#element")

// Esconde myElement.classList.add("escondido")

// Exibe myElement.classList.remove("escondido")

// Alterna (esconde se tá visível, exibe se tá escondido) myElement.classList.toggle("escondido")

O classList.toggle é o pulo do gato: ele sozinho já faz o liga e desliga

Assim teu estilo fica todo no CSS e o JS só cuida da regra, muito mais fácil de manter

Leia também

• Como exibir ou esconder elemento no React JS
• Como mudar a classe de um elemento com JavaScript