JavaScript HTML DOM cambiamento CSS
HTML DOM consente JavaScript per cambiare lo stile di elementi HTML.
Cambiare gli stili HTML
Per modificare lo stile di un elemento HTML, utilizzare la seguente sintassi:
document.getElementById(id).style.property=新样式
L'esempio seguente cambia l'elemento dello stile <p>:
Esempi
<! DOCTYPE html>
<HTML>
<Head>
<Meta charset = "utf-8">
<Title> Questo tutorial (w3big.com) </ title>
</ Head>
<Body>
<P id = "p1"> Ciao a tutti ! </ p>
<P id = "P2"> Ciao a tutti ! </ p>
<Script> document.getElementById ( "P2" ) style.color = "blu" ;. document.getElementById ( "P2") style.fontFamily = "Arial"; .. document.getElementById ( "P2") style.fontSize = "più grande"; </ script>
<P> sceneggiatura modificando i paragrafi precedenti. </ P>
</ Corpo>
</ Html>
Prova »
Utilizzare eventi
HTML DOM ci permette di eseguire codice innescando eventi.
Ad esempio, gli eventi seguenti:
- Elemento viene cliccato.
- La pagina viene caricata.
- casella Input viene modificato.
- ......
Nelle sezioni seguenti, si impara di più circa la conoscenza dell'evento.
Questo esempio viene modificato l'id style = elemento HTML "ID1", quando l'utente fa clic sul pulsante:
Esempi
<! DOCTYPE html>
<HTML>
<Body>
<H1 id = "id1"> La mia voce 1 </ h1>
<Tipo Pulsante = "button"
onclick = "document.getElementById ( 'ID1'). style.color = 'rosso'">
Mi punto! </ Button>
</ Corpo>
</ Html>
<HTML>
<Body>
<H1 id = "id1"> La mia voce 1 </ h1>
<Tipo Pulsante = "button"
onclick = "document.getElementById ( 'ID1'). style.color = 'rosso'">
Mi punto! </ Button>
</ Corpo>
</ Html>
Prova »
Altri esempi
visibilità
Come rendere un elemento invisibile. Elemento che si desidera visualizzare o scomparire?