Nwlapcug.com


Come cancellare gli stili CSS in un DIV

Gli stili CSS vengono applicati agli elementi di un documento HTML a titolo diversi "selettori", o i criteri per l'assegnazione di stile. Selettori di tipo assegnino stili agli elementi HTML (come i tag "div") secondo il loro nome del tag, selettori di classe assegnino stili agli elementi con un attributo di "classe" corrispondente e selettori ID corrispondono con i singoli elementi da 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 di classe con JavaScript. Alcuni stili ancora verranno ereditate da altri selettori, ma ciò è inevitabile se si desidera mantenere lo stesso elemento "div".

Istruzioni

1

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

< style type = "text/css" >

.styleName () {

font-size: 150%;

}

< / stile >

2

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

< script type = "text/javascript" >

Function clearStyles(id) () {

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

}

< / script >

La funzione di "clearStyles" Cancella l'attributo di "classe" dell'elemento cui attributo "id" è passato ad esso. Quando l'attributo "class" è deselezionata, tutti gli stili assegnati all'elemento tramite che selettore classe scomparirà.

3

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

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

< input type = "button" valore = "Fare clic per deselezionare gli stili dal DIV" onClick="clearStyles('divID');" >

Si noti l'utilizzo dell'attributo "id" per identificare l'elemento "div" per rimuovere gli stili da. Quando si fa clic sul pulsante, viene chiamata la funzione JavaScript, e il testo in "div" perde il suo stile "font-size" (così come il nome della classe).