JavaScript HTML DOM ändern CSS
HTML-DOM ermöglicht JavaScript, um die Art von HTML-Elementen zu ändern.
Ändern von HTML-Styles
Um den Stil eines HTML-Elements zu ändern, verwenden Sie folgende Syntax:
document.getElementById(id).style.property=新样式
Das folgende Beispiel soll den Stil <p> Element ändern:
Beispiele
<! DOCTYPE html>
<Html>
<Head>
<Meta charset = "UTF-8">
<Titel> Dieses Tutorial (w3big.com) </ title>
</ Head>
<Body>
<P id = "p1"> Hallo Welt ! </ p>
<P id = "p2"> Hallo Welt ! </ p>
<Script> document.getElementById ( "P2" ) style.color = "blue" ;. document.getElementById ( "P2") style.fontFamily = "Arial"; .. document.getElementById ( "P2") style.fontSize = "größer"; </ script>
<P> Skript durch die vorstehenden Absätze zu ändern. </ P>
</ Body>
</ Html>
Versuchen »
Verwenden Sie die Ereignis
HTML-DOM ermöglicht es uns, Code auszuführen durch Ereignisse ausgelöst wird.
Zum Beispiel im Anschluss an die Ereignisse:
- Element geklickt wird.
- Die Seite wird geladen.
- Das Eingabefeld wird geändert.
- ......
In den folgenden Abschnitten finden Sie mehr über die Veranstaltung wissen lernen.
Dieses Beispiel ändert den Stil id = "id1" HTML-Element, wenn der Benutzer auf die Schaltfläche klickt:
Beispiele
<! DOCTYPE html>
<Html>
<Body>
<H1 id = "id1"> Meine Überschrift 1 </ h1>
<Taste type = "button"
Onclick = "document.getElementById ( 'id1'). style.color = 'red'">
Zeigen Sie mich! </ Button>
</ Body>
</ Html>
<Html>
<Body>
<H1 id = "id1"> Meine Überschrift 1 </ h1>
<Taste type = "button"
Onclick = "document.getElementById ( 'id1'). style.color = 'red'">
Zeigen Sie mich! </ Button>
</ Body>
</ Html>
Versuchen »
Weitere Beispiele
Sichtbarkeit
Wie man ein Element unsichtbar machen. Element wollen Ihnen zeigen oder verschwinden?