Stilių kaitaliojimas per data- atributą JavaScript

Kad išspręstume problemą, aprašytą ankstesnėje pamokoje, mes nenustatysime elementui klasių, o keisime data- atributo reikšmę. Tai bus patogu, nes toks atributas gali turėti tik vieną reikšmę ir įrašant naują reikšmę, ji pati užtems senąją.

Pavyzdžiui, štai taip nustatysime sėkmingą stilių:

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

O štai taip – klaidos stilių:

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

Savų būsenų stilius nustatysime naudodami atributų selektorius:

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

Dabar galime lengvai nuspalvinti savo elementą sėkmės spalva:

elem.dataset.type = 'success';

O štai taip nuspalvinsime klaidos spalva:

elem.dataset.type = 'error';

Duotas įvesties laukas. Praradus fokusą, patikrinkite įvestą jį skaičių. Jei šis skaičius yra iki dešimties, nuspalvinkite įvesties lauką žalia spalva, jei nuo dešimties iki dvidešimt – gelta, o jei daugiau nei dvidešimt – raudona.