Clic su un elemento in una pagina Web, e qualcosa accade di solito. Se sviluppatore del sito aggiunto logica di script all'oggetto che si sceglie, ad esempio DIV, l'oggetto può modificare l'aspetto. Testo i colori cambiano e bordi di vari stili vengano visualizzati intorno la DIV. crea un DIV che cambia quando scelto aggiungendo un gestore di evento "onclick" al DIV dopo il caricamento della pagina Web. Tale evento può quindi chiamare una funzione JavaScript che cambia le caratteristiche di stile di DIV.

Istruzioni

1

Lanciare il vostro editor preferito HTML o blocco note.

2

Aprire un documento HTML e aggiungere un DIV nella pagina incollando il seguente codice nella sezione body del documento:

< div id = "div1" >

Intestazione < h1 > < / h1 >

Questo DIV contiene un'intestazione. L'id del DIV è "div1."

3

Sezione head del documento, aggiungere il seguente codice CSS:

.style1

{bordo: rosso; color: nero; background-color: giallo; border-style: tratteggiata; border-width: 2px;

}

.style2

{bordo: rosso; color: green; background-colore: bianco; border-style: punteggiato; border-larghezza: 10px;

}

Questo codice crea due classi CSS denominato "style1" e "style2." Ogni stile ha valori diversi per i suoi attributi di stile. La classe "style1", ad esempio, definisce un bordo rosso, e qualsiasi elemento fa riferimento a questa classe acquisisce un bordo rosso.

4

Incollare questo codice JavaScript nella sezione script del documento:

var divToChange = "div1";

var currentStyle = "style1";

Window. onLoad = function () {

var divObj = document.getElementById(divToChange);

divObj.onclick = function() {

divObj.className = currentStyle;

}

}

Questo codice imposta il valore della variabile "divToChange" id del DIV dichiarato nella sezione corpo. La variabile currentStyle contiene il nome della classe che contiene le impostazioni di stile da applicare al DIV quando cliccato. "Window. OnLoad" chiama anche la funzione che cambia "className" di DIV al valore memorizzato in "currentStyle."

5

Salvare il documento e aprirlo in un browser. Il browser Visualizza la pagina. Il DIV che contiene l'intestazione appare in quella pagina. Fare clic il DIV e acquisisce un bordo rosso fatto di trattini e uno sfondo giallo.

6

Tornare al codice HTML e modificare il valore "currentStyle" in "style2." Salvare il documento e tornare al browser. Premere "F5" per aggiornare la pagina del browser. Il DIV con l'intestazione viene visualizzato con nessun styling. Fare clic su DIV. Acquisisce le caratteristiche di stile definite nella classe CSS "style2", diventa verde, la dimensione del bordo aumenta a 10 pixel e lo sfondo diventa bianco.

Consigli & Avvertenze

• Questi sono solo alcuni delle caratteristiche styling che è possibile applicare agli elementi DIV. Internet contiene siti CSS utili che descrivono altre proprietà che è possibile utilizzare per modificare l'aspetto degli elementi DIV. Semplicemente creare una nuova classe CSS che contiene gli attributi visivi che si desidera utilizzare e assegnare quel nome per la variabile "currentStyle" come descritto nella procedura.