Le classi sono un modo di identificare elementi HTML in una pagina Web quando si utilizzano fogli di stile CSS per cambiare il loro aspetto. I gruppi di foglio di stile un insieme di proprietà di stile sotto un nome di classe. Poi, si assegna alcuni elementi nella pagina a una classe con l'attributo "class" dei loro tag HTML. Questi elementi avranno le proprietà della classe assegnata a loro quando la pagina viene visualizzata. JavaScript può essere utilizzato per modificare il nome della classe di un elemento HTML, così dopo la pagina viene visualizzata è possibile cambiare la sua classe e il suo stile verrà adattato al volo.

istruzione

1 Inserire il seguente codice CSS tra i tag "testa" del documento HTML:

<Style type = "text / css">

.class1 {

font-size: 150%;

colore blu;

}

.class2 {

font-size: 75%;

colore rosso;

text-decoration: underline;

}

</ Style>

2 Inserire il seguente codice JavaScript tra i tag "testa" del documento HTML:

<Script type = "text / javascript">

Funzione changeClassById (id, class) {

document.getElementById(id).className = class;

}

</ Script>

3 Inserire il seguente codice nel corpo del documento HTML per vedere come funziona la funzione "changeClassById":

<P class = "Class1" id = "p1"> Questo testo è in stile con i CSS. </ P>

<Input type = valore "pulsante" = "Cambio di classe" onclick = "changeClassById ( 'P1', 'class2');">

4 Salvare la pagina, poi caricarlo in un browser Web. Il testo sulla pagina è grande e blu perché l'elemento paragrafo è assegnato alla classe "Class1." Fare clic sul pulsante per chiamare la funzione JavaScript. Non appena la classe del paragrafo è cambiato, perde le proprietà "classe 1" ed è resa utilizzando le proprietà "Class2". L'elemento HTML per essere riassegnato viene identificato per la funzione utilizzando il suo attributo "id". Non ci sono due elementi dovrebbero avere lo stesso valore per "id".

5 Cambiare il nome della classe per tutti i tag di un certo tipo in una sola volta con questa funzione:

Funzione changeClassByTagName (tag, classe) {

var ref = document.getElementsByTagName(tag);

for (var i = 0; i & lt; ref.length; i ++) {

Rif [i] = .className classe;

}

}

Quando si chiama questa funzione, utilizzare un nome di tag (come "p") al posto di un valore "id". Tutti gli elementi di quel tipo lascerà loro classe corrente e unisciti quello specificato.