Stilwechsel durch data-Attribut in JavaScript

Um das im vorherigen Kapitel beschriebene Problem zu lösen, werden wir dem Element keine Klassen zuweisen, sondern den Wert des data- Attributs ändern. Dies ist deshalb praktisch, weil ein solches Attribut nur einen einzigen Wert haben kann und bei einer Zuweisung der neue Wert den alten automatisch überschreibt.

So weisen wir beispielsweise den Erfolgsstil zu:

<div id="elem" data-type="success">
	text
</div>

Und so den Stil für einen Fehler:

<div id="elem" data-type="error">
	text
</div>

Die Stile für unsere Zustände definieren wir über Attributselektoren:

[data-type="success"] {
	color: green;
}
[data-type="warning"] {
	color: orange;
}
[data-type="error"] {
	color: red;
}

Jetzt können wir unser Element leicht in der Erfolgsfarbe einfärben:

elem.dataset.type = 'success';

Und so färben wir es in der Fehlerfarbe ein:

elem.dataset.type = 'error';

Gegeben ist ein Inputfeld. Prüfen Sie bei Verlust des Fokus die eingegebene Zahl. Wenn die Zahl kleiner als zehn ist, färben Sie das Inputfeld grün ein, wenn sie zwischen zehn und zwanzig liegt - gelb, und wenn sie größer als zwanzig ist - rot.