Wenn Sie DHTML-Seiten erstellen, dann ist es sinnvoll, nicht mit
HTML-Attributen zu arbeiten, sondern Stylesheet Angaben zu verwenden.
Mit DOM können Sie direkt Einfluss auf die Style-Anweisungen nehmen.
In meinem Online-Kurs zu Cascade Style Sheet erfahren Sie das Wichtigste dazu.

Beispiel:
Es ist ein Absatz, fett, kursiv  und Schriftfarbe grün, definiert.

<p id="ab1"><b><i><font color="green">Das ist der Text im Absatz</font></i></b></p>

Der Zugriff auf den Textteil nach Dom würde nun so aussehen:
elem=document.getElementById("ab1");
elem.firstChild.firstChild.firstChild.firstChild.nodeValue="Neuer Text";

 

Jetzt das ganze nochmal mit Stylesheet:

<p id="ab1" style="color:green;font-weight:bold;font-style:italic">Das ist der Text im Absatz</p>

Wieder der Zugriff über DOM:
elem=document.getElementById("ab1");
elem.firstChild.nodeValue="neuer Text";

 Erkennen Sie den Unterschied?

Sie können die Stylesheet-Angaben auch wie gewohnt im Head-Bereich des Dokuments
definieren, oder aber in einer externen Datei, was in der Regel der Fall ist.

Mit den JavaScript Styleangaben können Sie nun direkten Einfluss auf die Elemente nehmen.

Beispiel: Es soll die Farbe eines gesamten Absatzes geändert werden.

Das Programm:  Hier klicken um das Beispiel zu sehen

<html>
<head>
<title>Praxis 3</title>
<style type="text/css">
#ab1     {     font-size:16pt;
                   font-weight:bold;
                   color:green  }
</style>

<script type="text/javaScript">
function ausgabe(a)
{
    elem=document.getElementById("ab1");
    if (aa=1)
    {
        elem.style.color="red";
        elem.style.fontStyle="italic";
    }
    if (a==0)
    {
        elem.style.color="green";
        elem.style.fontStyle="normal";
    } 
}
</script>

</head>
<body>
<p id="ab1">Man muss sehr<br>
gut aufpassen,<br>
was man haben will.<br>
Es könnte sonst passieren,<br>
das man es bekommt.</p>
<p id="ab1">&nbsp;</p>
<p>&nbsp;</p>
<p
onMouseOver="ausgabe(1)" onMouseOut="ausgabe(0)">
<font color="#0000FF"><b>Berühr mich mit der Maus</b></font></p>
</body>
</html>

Erklärung:
Über die Stylesheet-Zuweisungen wird dem Absatz mit der ID="ab1" das Aussehen zugeordnet.
Schriftgröße 16, fett, kursiv.

Wenn nun der Satz 'Berühr mich mit der Maus' mit der Maus berührt wird,
dann wird die JavaScript-Funktion ausgabe aufgerufen und die Zahl 1 als
Parameter übergeben.
Mit elem=document.getElementById("ab1") wird der Zugriff auf den Absatz eingeleitet.
Mit elem.style.color="red", wird die Schriftfarbe des Absatzes geändert und auf Rot gesetzt.
Mit elem style.fontStyle="italic", wird die Schrift kursiv dargestellt.

Es gilt:
Über javaScript können Sie auf die oben gezeigte Weise alle Cascade Style Sheet Zuweisungen
dynamisch ändern. Dabei müssen Sie folgende Syntax einhalten:

Dort, wo in CSS ein Bindestrich ist, wird in der JavaScript Anweisung der Bindestrich durch einen
Großbuchstaben des ersten zeichens nach dem Bindestrich ersetzt.


Beispiele:

CCS JavaScript
font-style fontStyle
background-color backgroundColor
text-decoration textDecoration

usw.  ( siehe auch meinen CSS-Onlinekurs )