Stílusváltás data- attribútummal JavaScriptben

Az előző leckében leírt probléma megoldásához nem osztályokat fogunk az elemnek beállítani, hanem a data- attribútum értékét fogjuk megváltoztatni. Ez azért lesz kényelmes, mert egy ilyen attribútum csak egyetlen értékkel rendelkezhet, és új érték beírásakor az új érték automatikusan felülírja a régit.

Például így állítjuk be a sikeres stílust:

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

És így a hiba stílusát:

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

Állapotaink stílusait attribútum szelektorokkal adjuk meg:

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

Most könnyen beállíthatjuk, hogy az elemünk a sikeres színt kapja:

elem.dataset.type = 'success';

És így állítjuk be a hiba színét:

elem.dataset.type = 'error';

Adott egy input. Amikor elveszti a fókuszt, ellenőrizd a beírt számot. Ha a szám tízig van, akkor színezd az inputot zöldre, ha tíztől húszig - sárgára, ha pedig húsz felett - pirosra.