Stiilide vaheldumine läbi data- atribuudi JavaScriptis

Eelmises õppetükis kirjeldatud probleemi lahendamiseks me ei määra elemendile klasse, vaid muudame data- atribuudi väärtust. See on mugav, kuna sellisel atribuudil võib olla ainult üks väärtus ja uue väärtuse kirjutamisel kirjutab see vana väärtuse automaatselt üle.

Näiteks määrame nii edu stiili:

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

Ja nii vea stiili:

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

Meie olekute stiilid määrame läbi atribuudi valijate:

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

Nüüd saame hõlpsalt värvida meie elemendi edukaks värvi:

elem.dataset.type = 'success';

Ja nii me värvime vea värvi:

elem.dataset.type = 'error';

Antud on input. Fookuse kaotamisel kontrollige sinna sisestatud numbrit. Kui see number on kümneni, siis värvige input roheliseks värviks, kui kümnest kahekümneni - kollaseks, ja kui rohkem kui kakskümmend - punaseks.