Cascading Style Sheet (CSS) le classi possono girare le pagine web ordinarie in mostra eccitanti di colore e di varietà. CSS permette di aggiungere colore, bordi e altre proprietà visive di elementi HTML. Per esempio, una classe denominata "Red" potrebbe rendere il colore di sfondo di un elemento DIV rosso, mentre un altro classe denominata "trattini" potrebbe disegnare un bordo tratteggiato attorno al DIV. Gli sviluppatori di solito definiscono nome della classe di un DIV durante la codifica, ma è possibile utilizzare JavaScript per cambiare quel nome della classe in qualsiasi momento.

istruzione

1 Aprire una delle tue pagine Web utilizzando un editor HTML o JavaScript.

2 Aggiungere un DIV alla pagina incollando il seguente codice HTML nella sezione "corpo" del documento:

<Div id = "TestDiv" class = "blue">

Questo testo è all'interno di un div

</ Div>

<Input id = "Button1" type = valore "pulsante" = "Cambio di classe" onclick = "changeClass ()" />

Questo DIV fa riferimento a una classe denominata "blu". il valore id del DIV è "TestDiv."

3 Aggiungere questo codice CSS per la sezione "testa" del documento:

<Style>

.blue {background-color: blue; colore: giallo; border-style: dotted; border-width: 1; }

.green {background-color: verde; colore rosso; border-style: solido; border-width: 1; }

</ Style>

Questo crea la classe ".blue" utilizzato dal DIV. La classe "blu" imposta il colore di sfondo della DIV al blu e il testo al giallo e pone un bordo punteggiato intorno ad esso. La seconda classe, denominato "verde", fa sì che ogni elemento che fa riferimento a esso per visualizzare uno sfondo verde, il testo rosso e un bordo solido.

4 Aggiungere questo codice JavaScript sotto il codice precedente:

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

var divName = "TestDiv";

var newClassName = "verde";

funzione changeClass () {

var divReference = document.getElementById (divName);

divReference.className = newClassName;

}

</ Script>

La variabile chiamata "divName" contiene il valore id del DIV che si desidera modificare. La variabile "newClassName" contiene il nome della nuova classe che si desidera applicare al DIV. Questa funzione changeClass sostituisce vecchio nome classe del div con quello nuovo.

5 Salvare il documento e visualizzarlo in un browser. Il DIV avrà uno sfondo blu, testo giallo e un bordo punteggiato.

6 Fare clic sul pulsante della pagina Web. Le piste di codice JavaScript e cambia il nome della classe del DIV da "blu" a "verde". Quando ciò accade, i cambiamenti l'aspetto del DIV in base alle proprietà definite nella classe CSS "verde".

Consigli e avvertenze

• Gli sviluppatori utilizzano questo nome cambia la tecnica di realizzare una varietà di compiti. Per esempio, rendendo il tuo JavaScript effettuare un cambio di nome della classe a caso, è possibile causare un DIV per un aspetto diverso ogni volta che un utente visita il tuo sito. È inoltre possibile utilizzare la funzione JavaScript per evidenziare il testo in un DIV assegnandole una classe che imposta il colore di sfondo al giallo quando un utente fa clic su un pulsante.