@Linuchs
Wie Der Martin schon erläutert hat, ist das keine gute Idee und du solltest hier wirklich Alternativen in Betracht ziehen!
So wie ich das sehe, kannst du auf JavaScript komplett verzichten, wenn es nur darum geht, CSS-Eigenschaften zu verändern, entweder wie in diesem Post von mir Angedeutet mit Pseudoklassen als Selektoren, oder aber, sofern das nicht reicht und du Styles dauerhaft verändern willst, indem du dich eines TricksTricks bedienst, mit CSS-Animation und animation-fill-mode: forwards
.
Im Gegensatz zu dem verlinkten Beispiel von mir könntest du die "Animation" von 0.1s auch als Klasse definieren und so mehreren Elementen zugänglich machen.
Aber selbst, wenn du das unbedingt über Javascript machen willst, solltest du ernsthaft darüber nachdenken, ob es so eine gute Sache ist, dein Markup mit onclick
-Handlern vollzustopfen! Wenn du dir dein eigenes Beispiel aus der Praxis ansiehst, wirst du feststellen, wie unübersichtlich dein Code ist, und dass du dadurch einige Flüchtigkeitsfehler eingebaut hast: Mal einfache, mal doppelte Anführungszeichen, mal gar keine, eimal class=>
...
Es wäre meiner Ansicht nach echt besser, wenn du HTML und JavaScript trennen würdest, und wie in meinem Eingangspost vorgeschlagen, die addEventListener-Methode verwenden würdest, - und am elegantesten, wenn du dir das Event-Bubbling nutzbar machen und deine Event-Behandlung wie hier vorgeschlagen zentralisieren würdest. - Die Elemente selektieren kannst du mit den hier im Wiki dokumentierten Methoden.
Aber wie gesagt, das wären nur meine Empfehlungen! ;-)
Gruß,
var.