Tyylien vuorottaminen data- attribuutin avulla JavaScriptissä

Ratkaistaksesemme edellisessä oppitunnissa kuvatun ongelman, emme aseta elementille luokkia, vaan muutamme data- attribuutin arvoa. Tämä on kätevää, koska tällaisella attribuutilla voi olla vain yksi arvo ja uuden arvon tallennus korvaa automaattisesti vanhan arvon.

Esimerkkinä asetamme tällä tavalla onnistunut tyylin:

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

Ja tällä tavalla tyylin virheelle:

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

Asetamme tilojemme tyylit attribuuttivalitsimien avulla:

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

Nyt voimme helposti värjätä elementtimme onnistuneen väriseksi:

elem.dataset.type = 'success';

Ja tällä tavalla värjäämme virheen väriseksi:

elem.dataset.type = 'error';

Annettu syöttökenttä. Tarkista kohdistimen menetyksen yhteydessä siihen syötetty luku. Jos luku on alle kymmenen, värjää syöttökenttä vihreäksi värillä, jos se on kymmenestä kahteenkymmeneen - keltaiseksi, ja jos yli kaksikymmentä - punaiseksi.