Striedanie štýlov pomocou data- atribútu v JavaScripte

Na vyriešenie problému opísaného v predchádzajúcej lekcii nebudeme prvku nastavovať triedy, ale budeme meniť hodnotu data- atribútu. To bude výhodné tým, že takýto atribút môže mať iba jednu hodnotu a pri zápise nová hodnota automaticky prepíše starú.

Napríklad takto nastavíme úspešný štýl:

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

A takto štýl pre chybu:

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

Štýly našich stavov nastavíme pomocou selektorov atribútov:

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

Teraz môžeme jednoducho zafarbiť náš prvok na úspešnú farbu:

elem.dataset.type = 'success';

A takto zafarbíme na farbu chyby:

elem.dataset.type = 'error';

Daný input. Pri strate focusu skontrolujte číslo, ktoré bolo do neho zadané. Ak je toto číslo do desať, zafarbite input na zelenú farbu, ak od desať do dvadsať - na žltú, a ak viac ako dvadsať - na červenú.