Izmena stilova preko data- atributa u JavaScript

Da bismo rešili problem opisan u prethodnoj lekciji, nećemo dodeljivati elementu klase, već ćemo menjati vrednost data- atributa. Ovo je zgodno jer takav atribut može imati samo jednu vrednost i pri upisu nova vrednost automatski prepisuje staru.

Na primer, ovako ćemo postaviti uspešan stil:

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

A ovako stil za grešku:

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

Stilove naših stanja ćemo postaviti preko selektora atributa:

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

Sada lako možemo obojiti naš element u uspešnu boju:

elem.dataset.type = 'success';

A ovako ćemo obojiti u boju greške:

elem.dataset.type = 'error';

Dat je input. Kada izgubi fokus, proverite unešeni broj. Ako je broj do deset, obojite input u zelenu boju, ako je od deset do dvadeset - u žutu, a ako je više od dvadeset - u crvenu.