JavaScript HTML DOM changement CSS
HTML DOM permet JavaScript pour modifier le style des éléments HTML.
styles Changement HTML
Pour modifier le style d'un élément HTML, utilisez cette syntaxe:
document.getElementById(id).style.property=新样式
L'exemple suivant va changer l'élément de style <p>:
Exemples
<! DOCTYPE html>
<Html>
<Head>
<Meta charset = "utf-8">
<Titre> Ce tutoriel (w3big.com) </ title>
</ Head>
<Body>
<P id = "p1"> Bonjour tout le monde ! </ p>
<P id = "p2"> Bonjour tout le monde ! </ p>
<Script> document.getElementById ( "p2" ) style.color = "blue" ;. document.getElementById ( "p2") style.fontFamily = "Arial"; .. document.getElementById ( "p2") style.fontSize = "agrandir"; </ script>
<P> script en modifiant les paragraphes ci - dessus. </ P>
</ Body>
</ Html>
Essayez »
Utiliser l'événement
HTML DOM nous permet d'exécuter du code par le déclenchement d'événements.
Par exemple, les événements suivants:
- Element est cliqué.
- La page se charge.
- boîte d'entrée est modifiée.
- ......
Dans les sections suivantes, vous en apprendrez plus sur la connaissance de l'événement.
Cet exemple modifie l'identifiant de style = élément HTML "ID1", lorsque l'utilisateur clique sur le bouton:
Exemples
<! DOCTYPE html>
<Html>
<Body>
<H1 id = "id1"> Ma position 1 </ h1>
<Type Bouton = "button"
onclick = "document.getElementById ( 'id1'). style.color = 'red'">
Dirigez-moi! </ Button>
</ Body>
</ Html>
<Html>
<Body>
<H1 id = "id1"> Ma position 1 </ h1>
<Type Bouton = "button"
onclick = "document.getElementById ( 'id1'). style.color = 'red'">
Dirigez-moi! </ Button>
</ Body>
</ Html>
Essayez »
D'autres exemples
visibilité
Comment faire un élément invisible. Element vous voulez montrer ou disparaître?