Como fechar uma DIV no JavaScript

Escrito por cathlene s. baptista | Traduzido por michel makarios
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
Como fechar uma DIV no JavaScript
Use O JavaScript para fechar dinamicamente elementos de conteúdo HTML, como seções DIV (Comstock/Comstock/Getty Images)

Quando os navegadores web carregam páginas HTML, são geradas representações delas em uma estrutura de árvore invertida que pode ser manipulada dinamicamente usando JavaScript. A manipulação da interface da página do usuário é feita atribuindo elementos nas referências dela (identificadores ou nomes) que podem ser identificados ou modificados em resposta às interações do usuário, como clicar em botões. Esse processo permite desenvolvedores web a abrir, fechar, mover ou deletar elementos identificados, como seções DIV, em resposta às interações do usuário.

Nível de dificuldade:
Moderadamente fácil

Outras pessoas estão lendo

Instruções

  1. 1

    Abra um editor de texto e crie um novo arquivo, geralmente selecionando "Novo" no menu "Arquivo". Adicione algumas tags básicas de HTML ao arquivo e o nomeie "fecharDiv.html". Após o passo 1, "fecharDiv.html" estará como:

    <html> <head></head> <body></body> </html>

  2. 2

    Edite "fecharDiv.html" adicionando as tags <script> e </script> ao HTML. Coloque-as entre as <head> e </head> e dê à tag <script> um atributo tipo de "text/javascript" para indicar sua linguagem. Após o passo 2, "fecharDiv.html" estará como o mostrado:

    <html> <head> <script type="text/javascript"> </script> </head> <body></body> </html>

  3. 3

    Declare uma função JavaScript entre as tags <script> e </script> nomeada fecharEssaDiv() e siga a declaração com duas chaves -- { e }. Após o passo 3, fecharDiv.html estará como o mostrado:

    <html> <head> <script type="text/javascript"> function fecharEssaDiv() { } </script> </head> <body></body> </html>

  4. 4

    Declare uma variável chamada abrirDiv entre as chaves que abrem e fecham a função. Use o método document.getElementById() para recuperar a referência para a div nomeDiv, e atribua-a à variável abrirDiv. Após o passo 4, fecharDiv.html estará como o mostrado:

    <html> <head> <script type="text/javascript"> function fecharEssaDiv() { var abrirDiv = document.getElementById('nomeDiv'); } </script> </head> <body></body> </html>

  5. 5

    Defina o estilo de exibição da variável abrirDiv para "none". Isso indica que o elemento DIV nomeDiv não deve ser exibido e deve ser removido na estrutura de formatação. Após o passo 5, fecharDiv.html estará como o mostrado:

    <html> <head> <script type="text/javascript"> function fecharEssaDiv() { var abrirDiv = document.getElementById('nomeDiv'); abrirDiv.style.display = 'none'; } </script> </head> <body></body> </html>

  6. 6

    Adicione uma tag <div> entre as <body> e </body> do fecharDiv.html e defina o valor do ID para "nomeDiv" (essa é a referência da tag). Coloque o texto "Esse texto está em uma DIV" depois da tag <div> aberta e feche a tag </div>. Após o passo 6, fecharDiv.html estará como o mostrado:

    <html> <head> <script type="text/javascript"> function fecharEssaDiv() { var abrirDiv = document.getElementById('nomeDiv'); abrirDiv.style.display = 'none'; } </script> </head> <body> <div id="nomeDiv"> Esse texto está em uma DIV </div> </body> </html>

  7. 7

    Adicione uma tag <button> imediatamente em seguida da </div>. Atribua um evento onClick para o botão e defina seu valor para "javascript:fecharEssaDiv()" para indicar que a função fecharEssaDiv() deve ser chamada quando o botão for clicado. Dê a ele o texto "Clique para fechar a DIV" e feche a tag com </button>. Após o passo 7, fecharDiv.html estará como o mostrado:

    <html> <head> <script type="text/javascript"> function fecharEssaDiv() { var abrirDiv = document.getElementById('nomeDiv'); abrirDiv.style.display = 'none'; } </script> </head> <body> <div id="nomeDiv"> Esse texto está na DIV </div> <button onClick="javascript:fecharEssaDiv();">Clique para fechar a DIV</button> </body> </html>

  8. 8

    Abra o fecharDiv.html em um navegador web. Clique no botão "Clique para fechar a DIV" para fechar a tag div nomeDiv.

Dicas & Advertências

  • Os valores id (referência) atribuídos a elementos com o propósito de manipular um layout de página podem ser estilizados usando modelos cascatas de estilos.
  • Os blocos podem ser estilizados usando muitos valores de propriedade, incluindo nenhum, bloco, inline, lista-item e outros.
  • O valor de exibição padrão é o inline, ou seja, se nenhum valor for dado ao display, será gerado um bloco inline sem quebras de linha antes ou depois do elemento.
  • Um display com "none" não cria blocos ou remove os já existentes. Isso não torna o bloco invisível.

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