Styling mit Klassen in JavaScript
Elemente über das Attribut style zu gestalten,
ist manchmal praktisch, aber meistens - nicht die
beste Idee. Das Problem besteht darin, dass die Stile
über die JavaScript-Datei verstreut sein werden
und es aufwändig sein wird, sie zu ändern.
Viel bequemer ist es, Stile in CSS-Dateien
festzulegen, damit sie leicht geändert werden können,
ohne im JavaScript-Code herumwühlen zu müssen.
Nehmen wir als Beispiel ein Element, das eine bestimmte Nachricht ausgibt. Die Nachricht kann "gut" sein und in grüner Farbe ausgegeben werden oder "schlecht" und in roter Farbe ausgegeben werden. Die beste Lösung in einem solchen Fall wäre, dafüɾ die entsprechenden CSS-Klassen zu erstellen:
.success {
color: green;
}
.error {
color: red;
}
Jetzt werden wir beim Ausgeben der "guten" Nachricht dem Element die "gute" Klasse geben:
elem.textContent = 'good';
elem.classList.add('success');
Und beim Ausgeben der "schlechten" Nachricht werden wir dem Element die "schlechte" Klasse geben:
elem.textContent = 'bad';
elem.classList.add('error');
Gegeben sind Absätze mit Zahlen. Durchlaufen Sie diese Absätze mit einer Schleife und färben Sie Absätze, die gerade Zahlen enthalten, rot, und solche, die ungerade Zahlen enthalten - grün.
