Наизменично менување на стилови преку data- атрибут во JavaScript

За да го решиме проблемот опишан во претходната лекција, нема да му задаваме класи на елементот, туку ќе ја менуваме вредноста на data- атрибутот. Ова е погодно бидејќи ваквиот атрибут може да има само една вредност и при запишување новата вредност автоматски ќе ја пребрише старата.

На пример, вака ќе го зададеме успешниот стил:

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

А вака стилот за грешка:

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

Стиловите на нашите состојби ќе ги зададеме преку селектори на атрибути:

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

Сега лесно можеме да го обоїме нашиот елемент во успешна боја:

elem.dataset.type = 'success';

А вака ќе го обоїме во боја на грешка:

elem.dataset.type = 'error';

Даден е input. При губење на фокусот проверете го внесениот број во него. Ако бројот е до десет, обојте го input-от во зелена боја, ако е од десет до дваесет - во жолта, а ако е повеќе од дваесет - во црвена.