Редуване на стилове чрез 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 полето в зелен цвят, ако е от десет до двадесет - в жълт, а ако е повече от двадесет - в червен.