Classi CSS Style Sheet (CSS) possono trasformare normali pagine Web in emozionanti display di colore e varietà. CSS consente di aggiungere colore, bordi e altre proprietà visual agli elementi HTML. Per esempio, una classe denominata "Rosso" potrebbe rendere rosso colore di sfondo di un elemento DIV, mentre un'altra classe denominata "trattini" potrebbe disegnare un bordo tratteggiato intorno gli sviluppatori DIV. di solito definiscono il nome della classe di un DIV durante la codifica, ma è possibile utilizzare JavaScript per modificare il nome della classe in qualsiasi momento.

Istruzioni

1

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

2

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

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

Questo testo è all'interno di un div

< / div >

< id di input = "Button1" type = "button" value = "Classe Change" onclick="changeClass()" / >

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

3

Aggiungere questo codice CSS alla sezione "head" del documento:

< style >

offenda {background-color: blue; colore: giallo; border-style: punteggiato; border-larghezza: 1;}

verdi {background-colore: verde; color: Red; border-style: solid; border-width: 1;}

< / stile >

Questo crea la classe "offenda" utilizzata da DIV. La classe "blu" Imposta colore di sfondo del DIV blu e il testo al giallo e posiziona un bordo punteggiato intorno ad esso. La seconda classe, denominata "verde," fa sì che qualsiasi elemento che vi fa riferimento per visualizzare uno sfondo verde, testo rosso e un bordo a tinta unita.

4

Aggiungere questo codice JavaScript sotto il codice precedente:

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

var divName = "TestDiv";

var newClassName = "green";

Function changeClass() () {

var divReference = document.getElementById(divName);

divReference.className = newClassName;

}

< / script >

La variabile denominata "divName" contiene il valore di id del DIV che si desidera modificare. La variabile "newClassName" contiene il nome della nuova classe che si desidera applicare il div. Questa funzione changeClass sostituisce il vecchio nome della classe di DIV con uno 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. Il codice JavaScript viene eseguito e cambia il nome della classe di DIV da "blu" a "verde". Quando ciò accade, aspetto di DIV cambia per abbinare le proprietà definite nella classe CSS "verde".

Consigli & Avvertenze

• Gli sviluppatori utilizzano questa tecnica cambia nome per conseguire una varietà di compiti. Per esempio, facendo il vostro JavaScript esegue un nome di classe random, modificare, è possibile causare un DIV per un aspetto diverso ogni volta che un utente visita il tuo sito. È anche possibile utilizzare la funzione JavaScript per evidenziare il testo in un DIV assegnandogli una classe che imposta il colore di sfondo giallo quando un utente fa clic su un pulsante.