Parte della magia della navigazione in Internet viene dalla visualizzazione di effetti speciali che i siti web generano. Agli sviluppatori di creare pagine Web che utilizzano blocchi di costruzione; nel linguaggio di markup HTML, questi blocchi sono chiamati "div". Un div può contenere testo, immagini, menu e altri elementi HTML. Quando una pagina viene visualizzata una barra laterale sulla sinistra, il contenuto al centro e una barra laterale sulla destra, probabilmente composto da tre blocchi div formattazione che il contenuto. Manipolando div, è possibile spostare uno dentro l'altro e creare una varietà di effetti utili e divertenti.

istruzione

1 Blocco note lancio o qualsiasi editor HTML.

2 Aprire uno dei documenti HTML e incolla questo codice ovunque nella sezione "corpo" del documento:

<Div id = "div1" class = "green">

div 1

</ Div>

<Div id = "div2" class = "yellow">

div2

</ Div>

<Input id = "Button1" type = valore "pulsante" = "Sposta Div" onclick = "return moveDiv ()" />

Questo crea due elementi div. Il primo div, il cui ID è "div1," fa riferimento a una classe CSS denominato "verde", mentre il secondo div - "div2" - si riferisce ad una classe denominata "gialla". Il pulsante sull'ultima riga chiama la funzione "moveDiv" JavaScript che muove il primo div nella seconda div.

3 Incolla questo codice nella sezione "testa" del documento:

<Style type = "text / css">

.yellow {background-color: yellow;}

.green {background-color: verde; width: 50px;}

</ Style>

Questi sono i "gialli" e le classi "verdi" a cui fanno riferimento gli elementi div. Ognuno crea un colore di sfondo diverso per il contenitore div che chiama.

4 Aggiungere il seguente codice JavaScript sotto il tag di chiusura "stile" nel documento:

<Script language = tipo "javascript" = "text / javascript">

var divToMove = "div1";

var = "targetDiv div2";

funzione moveDiv () {

var div1 = document.getElementById (divToMove);

var div2 = document.getElementById (targetDiv);

div2.appendChild (div1);

}

</ Script>

La funzione "moveDiv" ottiene un riferimento al primo div e lo sposta nella seconda div eseguendo il metodo "appendChild". Questo metodo JavaScript utile consente di riposizionare elementi div e aggiungere nuovi elementi bambino div a quelli esistenti.

5 Salvare il documento HTML modificato e visualizzare in un browser. Si vedrà un breve div verde (div1) sulla prima riga e una lunga div gialla (div2) sulla seconda riga.

6 Fare clic sul pulsante "Sposta Div". Quando il codice JavaScript viene eseguito, si muove il primo div nella seconda. Poiché gli elementi div hanno colori diversi, si può vedere che "div1" è dentro "div2."

Consigli e avvertenze

• Questo esempio imposta i valori per "divToMove" e "targetDiv" all'inizio del blocco di codice JavaScript. Probabilmente si vorrà per rimuovere quelle due righe di codice e modificare la definizione di funzione in modo che appaia come segue: la funzione moveDiv (divToMove, targetDiv). Questo consente ad altre funzioni nel codice per chiamare la funzione e passare attraverso questi due parametri.
• Ricordate che i contenitori div possono contenere qualsiasi elemento HTML, tra cui un'immagine. Si potrebbe, per esempio, causare una immagine a comparire all'improvviso all'interno di un blocco di paragrafo più in basso nella pagina semplicemente muovendo div dell'immagine nel div che contiene il paragrafo.