Parte della magia di navigazione Internet proviene da visualizzazione effetti speciali che generare siti Web. Gli sviluppatori di creare pagine Web utilizzando 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, contenuto nel mezzo e una barra laterale sulla destra, probabilmente consiste di tre blocchi div formattazione che il contenuto. Manipolando il div, è possibile spostare uno dentro l'altro e creare una varietà di effetti utili e divertenti.

Istruzioni

1

Avviare Blocco note o qualsiasi editor HTML.

2

Aprire uno dei documenti HTML e incollare questo codice in qualsiasi punto nella sezione "corpo" del documento:

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

div 1

< / div >

< div id = "div2" class = "giallo" >

div2

< / div >

< id di input = "Button1" type = "button" value = "Spostare il Div" onclick = "return moveDiv()" / >

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

3

Incolla questo codice nella sezione "head" del documento:

< style type = "text/css" >

accendera {background-color: yellow;}

verdi {background-color: green; Larghezza: 50px;}

< / stile >

Queste sono le classi di "gialle" e "verde" a cui fanno riferimento gli elementi div. Ognuno di essi crea un colore di sfondo diverso per il contenitore div che lo chiama.

4

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

< script language = "javascript" type = "text/javascript" >

var divToMove = "div1";

var targetDiv = "div2";

Function moveDiv() () {

div1 var = document.getElementById(divToMove);

div2 var = document.getElementById(targetDiv);

div2.appendChild(Div1);

}

< / script >

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

5

Salvare il documento HTML modificato e visualizzarla in un browser. Vedrete un breve div verde (div1) sulla prima riga e un div giallo lunga (div2) sulla seconda riga.

6

Fare clic sul pulsante "Spostare il Div". Quando viene eseguito il codice JavaScript, si muove il primo div in quello secondo. Perché gli elementi div hanno colori diversi, si può vedere che "div1" è all'interno di "div2."

Consigli & Avvertenze

• Questo esempio imposta i valori per "divToMove" e "targetDiv" all'inizio del blocco di codice JavaScript. Probabilmente vorrete rimuovere queste due righe di codice e modificare la definizione della funzione in modo che appaia come indicato di seguito: funzione moveDiv (divToMove, targetDiv). Questo consente ad altre funzioni nel codice per chiamare la funzione e passare attraverso questi due parametri.
• Ricordare che div contenitori possono contenere qualsiasi elemento HTML, tra cui un'immagine. Si potrebbe, ad esempio, causare una sola immagine apparire improvvisamente all'interno di un blocco di paragrafo ulteriormente verso il basso la pagina spostando semplicemente div dell'immagine nel div che contiene il paragrafo.