Střídání stylů pomocí data- atributu v JavaScriptu

Pro vyřešení problému popsaného v předchozí lekci nebudeme prvku nastavovat třídy, ale budeme měnit hodnotu data- atributu. To bude výhodné tím, že takový atribut může mít pouze jednu hodnotu a při zápisu nová hodnota automaticky přepíše tu starou.

Jako příklad takto nastavíme úspěšný styl:

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

A takto styl pro chybu:

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

Styly našich stavů nastavíme pomocí selektorů atributů:

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

Nyní můžeme snadno obarvit náš prvek na úspěšnou barvu:

elem.dataset.type = 'success';

A takto jej obarvíme na barvu chyby:

elem.dataset.type = 'error';

Je dán input. Při ztrátě fokusu zkontrolujte do něj zadané číslo. Pokud je toto číslo menší než deset, obarvte input na zelenou barvu, pokud je mezi deseti a dvaceti - na žlutou, a pokud je více než dvacet - na červenou.