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!