Le classi sono un modo di identificare gli elementi HTML in una pagina Web quando si utilizza fogli di stile CSS per cambiare il loro aspetto. Il foglio di stile raggruppa un insieme di proprietà di stile con un nome di classe. Quindi, assegnare determinati elementi nella pagina a una classe con l'attributo "class" di loro tag HTML. Quegli elementi avrà le proprietà della classe assegnate quando viene eseguito il rendering della pagina. JavaScript può essere usato per cambiare il nome della classe di un elemento HTML, così dopo il rendering della pagina è possibile modificare la sua classe e il suo stile sarà adeguato al volo.

Istruzioni

1

Inserire il seguente codice CSS tra i tag di "head" del documento HTML:

< style type = "text/css" >

.Class1 () {

font-size: 150%;

colore: blu;

}

.Class2 () {

font-size: 75%;

colore: rosso;

testo-decorazione: sottolineatura;

}

< / stile >

2

Inserire il codice JavaScript seguente tra i tag di "head" del documento HTML:

< script type = "text/javascript" >

Function changeClassById(id,class) () {

document.getElementById(id).className = class;

}

< / script >

3

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

< classe p = "class1" id = "p1" > questo testo è in stile con CSS. </p >

< input type = valore "pulsante" = "Classe Change" onClick="changeClassById('p1','class2');" >

4

Salvare la pagina, quindi caricarlo in un browser Web. Il testo nella pagina è grande e blu perché il paragrafo è assegnato alla classe "class1." Fare clic sul pulsante per chiamare la funzione JavaScript. Appena è cambiato classe del paragrafo, perde le proprietà di "class1" e viene eseguito il rendering utilizzando le proprietà di "classe2". L'elemento HTML per la riassegnazione è identificato alla funzione utilizzando l'attributo "id". Nessun due elementi dovrebbero avere lo stesso valore per "id."

5

Modificare il nome di classe per tutti i tag di un certo tipo in una volta con questa funzione:

Function changeClassByTagName(tag,class) () {

var ref = document.getElementsByTagName(tag);

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

ref[i].className = class;

}

}

Quando si chiama questa funzione, è possibile utilizzare un nome di tag (come "p") anziché un valore di "id". Tutti gli elementi di quel tipo lascerà loro classe corrente e Iscriviti a quello specificato.