Come cancellare gli stili CSS in un DIV

January 30

stili CSS vengono applicati a elementi di un documento HTML per mezzo di diversi "selettori", ovvero i criteri per l'assegnazione di stile. Tipo selettori assegnare stili agli elementi HTML (come tag "div") in base al loro nome di tag, selettori di classe assegnare gli stili di elementi con un attributo di corrispondenza "di classe", e selettori di ID abbinare con i singoli elementi per la loro attributo ID. Ci sono altri tipi di selettori, ma questi tre sono più comuni. Per cancellare gli stili da un tag "div" dopo che la pagina viene caricata, rimuovere il nome della classe (s) con JavaScript. Alcuni stili saranno ancora ereditate da altri selettori, ma questo è inevitabile se si desidera mantenere l'elemento "div" stesso.

istruzione

1 Identificare i vari stili applicati all'elemento "div", e che i selettori assegnarli. Utilizzare un selettore di classe per tutti gli stili che si desidera essere in grado di cancellare. Posizionare la seguente dichiarazione della classe di esempio tra i tag "testa" del documento HTML:

<Style type = "text / css">

.styleName {

font-size: 150%;

}

</ Style>

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

<Script type = "text / javascript">

clearStyles funzione (id) {

document.getElementById(id).className="";

}

</ Script>

La funzione "clearStyles" cancella l'attributo "class" dell'elemento cui attributo "id" è passato ad esso. Quando l'attributo "class" viene cancellata, tutti gli stili assegnati all'elemento tramite selettore di classe che scompariranno.

3 Aggiungere il seguente codice al corpo del documento HTML per testare il codice:

<Div class = "styleName" id = "divID"> Shrink questo testo con il tasto </ div>

<Input type = valore "pulsante" = "Fare clic per deselezionare stili dal DIV" onclick = "clearStyles ( 'divId');">

Si noti l'uso dell'attributo "id" per identificare l'elemento "div" per rimuovere gli stili da. Quando il pulsante viene premuto, la funzione JavaScript viene chiamata, e il testo nella "div" perde il suo stile "font-size" (così come il suo nome di classe).