Como esconder pela classe em JavaScript

Escrito por lisa nelson | Traduzido por cezar rosa
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
Como esconder pela classe em JavaScript
Aprenda mais sobre JavaScript (Visage/Stockbyte/Getty Images)

JavaScript é uma linguagem de programação usada para que sites realizem interações com os usuários. Ele permite que as páginas mostrem janelas pop-up, enviem requisições de forma assíncrona para o servidor e criem menus suspenso, para citar alguns exemplos. Apesar do JavaScript ter funções para encontrar elementos por ID e nome, ele não tem uma função para encontrar elementos por classe. Você pode, no entanto, ocultar elementos pela classe ao iterar sobre todos os elementos, verificando se sua classe corresponde à classe procurada e, em caso afirmativo, esconda o elemento.

Nível de dificuldade:
Moderadamente fácil

Outras pessoas estão lendo

Instruções

  1. 1

    Crie um novo arquivo e salve-o com a extensão ".html". Abra o arquivo em um editor de texto, como o Bloco de Notas.

  2. 2

    Escreva um segmento de código HTML para criar um botão com um atributo "onClick" de "esconder()". Isso irá chamar a função "esconder" em JavaScript quando o botão for clicado. Aqui está o código:

    <button onClick="esconder()">Esconder</button>

  3. 3

    Escreva um segmento de código HTML que crie um número de elementos HTML com a classe "podeesconder". Tais elementos serão escondidos quando o botão do passo anterior for clicado. Aqui está o código:

    <div class="podeesconder">Isso é uma div que pode ser escondida</div> <span class="podeesconder">Isso é um span que pode ser escondido</span>

  4. 4

    No início do arquivo, escreva as tags "script" de abertura e fechamento. Elas informam o navegador que o código dentro delas é em JavaScript. Abaixo está o código:

    <script> </script>

  5. 5

    Entre as tags "script", escreva uma função em JavaScript que esconde todos os elementos HTML que tenham a classe "podeesconder". Em primeiro lugar, ela deve buscar todos os elementos e colocá-los em um array através da função "document.getElementsByTagName" com o parâmetro "*" e salvando o resultado em uma nova variável. Em segundo lugar, ela deve iterar sobre cada elemento no array através de um laço "for". Em terceiro lugar, ela deve verificar se o item atual tem a classe "podeesconder", através do método "getAttribute", e, caso afirmativo, esconder o elemento configurando a propriedade "style.display" para "none". Abaixo você vê o código da função proposta:

    function esconder() { var elementos = document.getElementsByTagName("*"); for(i = 0; i < elementos.length; i++) { if(elementos[i].getAttribute("class") == "podeesconder") { elementos[i].style.display = "none"; }}}

Não perca

Filtro:
  • Geral
  • Artigos
  • Slides
  • Vídeos
Mostrar:
  • Mais relevantes
  • Mais lidos
  • Mais recentes

Nenhum artigo disponível

Nenhum slide disponível

Nenhum vídeo disponível