Der HTML-DOM ermöglicht es JavaScript, um die Art von HTML-Elementen zu ändern.
Ändern HTML-Stil
Um den Stil eines HTML-Elements zu ändern, verwenden Sie folgende Syntax:
document.getElementById(id).style.property=new style
Das folgende Beispiel ändert den Stil eines <p> Element:
Beispiel
<html>
<body>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color = "blue";
</script>
<p>The paragraph above was changed by a script.</p>
</body>
</html>
Versuch es selber " Mit Events
Der HTML-DOM ermöglicht es Ihnen, Code auszuführen, wenn ein Ereignis eintritt.
Die Ereignisse werden vom Browser erzeugt wird, wenn "Dinge geschehen", um HTML-Elemente:
- Ein Element anklickt
- Die Seite wurde geladen
- Eingabefelder geändert werden
Sie werden mehr über Veranstaltungen im nächsten Kapitel dieses Tutorials lernen.
In diesem Beispiel wird der Stil des HTML - Elements mit id="id1" , wenn der Benutzer auf eine Schaltfläche klickt:
Beispiel
<!DOCTYPE html>
<html>
<body>
<h1 id="id1">My Heading 1</h1>
<button type="button"
onclick="document.getElementById('id1').style.color = 'red'">
Click Me!</button>
</body>
</html> Versuch es selber " Mehr Beispiele
Sichtbarkeit Wie ein Element unsichtbar zu machen. Wollen Sie das Element oder nicht zeigen?
HTML-DOM Stil Object Reference
Für alle Stileigenschaften HTML - DOM, einen Blick auf unsere komplette HTML - DOM - Art - Objekt Referenz .
Testen Sie sich mit Übungen!
Übung 1 » Übung 2» Übung 3 » Übung 4» Übung 5 »