Come nascondere un HTML DIV in JavaScript

November 1

Per varie ragioni, si potrebbe desiderare di nascondere un elemento HTML che contiene testo o altri contenuti, come ad esempio un tag "div", dopo una pagina web carichi. È possibile farlo con JavaScript per modificare lo stile dell'elemento, utilizzando l'aspetto "getElementById" del Document Object Model. La funzione JavaScript può essere chiamata come qualsiasi altro comando; in questo tutorial, verrà associata a un pulsante che, se cliccato, si nasconde il tag alla vista.

istruzione

1 Utilizzare un editor di testo per aprire il file HTML che contiene il tag "div" che si desidera nascondere. Trova l'elemento specifico nel documento.

2 Aggiungere questo codice subito dopo la parte "div" del tag di apertura: "id = 'nascosto'". Il tag dovrebbe apparire come questo: "<div id = 'nascosto'>". Se ci sono altri attributi associati al div, aggiungere l'attributo id prima; per esempio, potrebbe apparire come "<div id = 'hidden' class = 'body_copy_text' style = 'color: # 000;'>".

3 Scorrere fino alla fine del div (contrassegnato da "</ div>"), e premere il tasto Invio per creare una nuova linea. Su di esso, digitare il seguente codice: "<div onclick =" document.getElementById ( 'nascosto') style.display = 'none'. "> Nascondi Div </ div>".

4 Salvare il file HTML e uscire dall'editor di testo.

5 Caricare il file HTML nel browser Web, e cercare il blocco di testo che dice 'Nascondi Div.' Clicca su di esso per nascondere il div si etichettati con il "id = 'nascosto'" attributo.

Consigli e avvertenze

  • Se si desidera che il div per essere nascosto automaticamente quando la pagina viene caricata, è più facile usare i CSS che usare JavaScript. All'interno del tag "<div>", aggiungere la seguente riga tra il "<div" e la ">": "style = 'display: none;'". Questo sarà anche nascondere il contenuto per gli spettatori che non hanno JavaScript abilitato.