Izmenično preklapljanje stilov prek data- atributa v JavaScript

Za rešitev problema, opisanega v prejšnji lekciji, ne bomo nastavljali razredov elementu, temveč bomo spreminjali vrednost data- atributa. To je priročno, ker ima tak atribut lahko samo eno vrednost in pri pisanju nova vrednost samodejno prepiše staro.

Za primer, tako bomo nastavili uspešen stil:

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

In tako stil za napako:

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

Stile naših stanj bomo nastavili s selektorji atributov:

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

Zdaj z lahkoto lahko pobarvamo naš element v uspešno barvo:

elem.dataset.type = 'success';

In tako ga pobarvamo v barvo napake:

elem.dataset.type = 'error';

Podan je vnosni element. Ob izgubi fokusa preverite vanj vneseno število. Če je to število manjše od deset, pobarvajte vnosno polje v zeleno barvo, če je od deset do dvajset - v rumeno, če pa je večje od dvajset - v rdečo.