Zum Inhalt springen

CSS-Stile und JavaScript: Stylisierung und Interaktion

Schritt 3 von 7

In der Praxis können wir das obige Beispiel erweitern, indem wir eine Anzahl an Farben definieren und durch Zufall eine davon wählen, um einen dynamischen Eindruck zu erzeugen:

// javascript-code
const colors = ['lightblue', 'lightgreen', 'lightyellow', 'lightpink'];
const randomColor = colors[Math.floor(Math.random() * colors.length)];
 
document.getElementById('myElement').addEventListener('click', function() {
this.style.backgroundColor = randomColor;
this.style.color = 'black';
});