Come modificare la visibilità DIV con JavaScript

April 13

Come modificare la visibilità DIV con JavaScript


JavaScript è un linguaggio di scripting lato client che può essere usato per creare pagine web dinamiche che rispondono alle azioni dell'utente. Ad esempio, gli utenti interagiscono con le pagine web facendo clic sui pulsanti, l'apertura delle pagine o spostando il cursore del mouse sopra gli elementi della pagina web. Queste interazioni innescano eventi quali "onclick", "onLoad" o "onmouseover" che può, a sua volta, attivare funzioni JavaScript. Le funzioni possono utilizzare built-in metodi JavaScript, come ad esempio "getElementById," per modificare la visibilità stile degli elementi della pagina web, come testo collocati in tag "DIV".

istruzione

1 Aprire un editor di testo e creare un nuovo file chiamato divVisibility.html. Aggiungere tag HTML al file che includono un open "<html>" tag, un "<head>" tag di apertura, una stretta "</ head>" tag, un "<body>" tag di apertura, una stretta "</ body> "tag, e una stretta" tag </ html> ".

<Html>

<Head> </ head>

<Body> </ body>

</ Html>

2 Aggiungi un tag "<script>" tra il "<head>" e "</ head>" tag, impostare il <script> attributo type del tag a "text / javascript" e chiudere il tag "</ script>".

<Html>

<Head>

<Script type = "text / javascript">

</ Script>

</ Head>

<Body> </ body>

</ Html>

3 Aggiungere una funzione denominata "getStyle" tra i tag "</ script>" "<script>" e. Questa funzione prende un argomento: una variabile denominata "visibilità". Aggiungere una parentesi graffa aperta ( "{") e una stretta parentesi graffa ( "}") dopo la dichiarazione di funzione per indicare dove collocare il "getStyle" codice funzione.

<Html>

<Head>

<Script type = "text / javascript">

Funzione getStyle (visibilità)

{

}

</ Script>

</ Head>

<Body> </ body>

</ Html>

4 Aggiungere un comando tra parentesi graffe la funzione "getStyle" di che utilizza il comando "getElementById" JavaScript. Questo comando imposta il "style.visibility" attributo di un <div> con l'ID "myField" per il valore della "visibilità" di argomenti variabili.

<Html>

<Head>

<Script type = "text / javascript">

Funzione getStyle (visibilità)

{

. Document.getElementById ( "myField") style.visibility = visibilità;

}

</ Script>

</ Head>

<Body> </ body>

</ Html>

5 Aggiungere un tag "<div>" tra il file "<body>" e "</ body>" tag e dare il tag l'id "myField". Aggiungere il testo "nascondere e mostrare DIV" dopo il tag "<div>" e chiudere il tag "</ div>".

<Html>

<Head>

<Script type = "text / javascript">

Funzione getStyle (visibilità)

{

. Document.getElementById ( "myField") style.visibility = visibilità;

}

</ Script>

</ Head>

<Body>

<Div id = "myField"> nascondere e mostrare DIV </ div>

</ Body>

</ Html>

6 Aggiungere un pulsante dopo il tag vicino "</ div>". Assegnare un "onClick ()" evento JavaScript al pulsante che chiama la funzione "getStyle ()" con l'argomento "visibile". Assegnare il testo "Rendere il tag DIV visibile" per il pulsante e chiudere il "<button />" tag.

<Html>

<Head>

<Script type = "text / javascript">

Funzione getStyle (visibilità)

{

. Document.getElementById ( "myField") style.visibility = visibilità;

}

</ Script>

</ Head>

<Body>

<Div id = "myField"> nascondere e mostrare DIV </ div>

<Button onclick = getStyle ( "visibile")> Crea il tag DIV <tasto /> visibile

</ Body>

</ Html>

7 Aggiungere un secondo pulsante di tag al file. Assegnare un "onClick ()" evento JavaScript al pulsante che chiama la funzione "getStyle" con l'argomento "nascosto". Assegnare il testo "Rendere il tag DIV invisibile" per il pulsante e chiudere il "<button />" tag. Salvare e chiudere divVisibility.html.

<Html>

<Head>

<Script type = "text / javascript">

Funzione getStyle (visibilità)

{

. Document.getElementById ( "myField") style.visibility = visibilità;

}

</ Script>

</ Head>

<Body>

<Div id = "myField"> nascondere e mostrare DIV </ div>

<Button onclick = getStyle ( "visibile")> Crea il tag DIV <tasto /> visibile

<Button onclick = getStyle ( "nascosta")> Crea il tag DIV invisibile </ button>

</ Body>

</ Html>

8 Aprire divVisibility in un browser web. Fare clic sul pulsante "Crea il tag DIV visibile" per mostrare il testo tra il "MyField" "<div>" e "</ div>" tag. Fare clic sul "rendere il pulsante invisibile tag DIV per nascondere il testo tra il" myField "" <div> "e" </ div> "tag.

Consigli e avvertenze

  • Il testo visualizzato nei tag HTML DIV può essere nascosto o visualizzato utilizzando gli stili CSS creati utilizzando i fogli di stile.
  • Si tratta di una pratica migliore per verificare codice dinamico, eventi e metodi in diversi browser web per assicurarsi che il codice funziona in modo coerente.
  • Il "<DIV>" tag HTML può usufruire di molti stili CSS che forniscono interfacce utente più interessanti.
  • Considerare l'utilizzo di un "ritorno" al termine di qualsiasi funzione che non restituisce un valore per garantire le opere funzionare come previsto.