Чередование стилей через 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';

Дан инпут. По потери фокуса проверьте введенное в него число. Если это число до десяти, то покрасьте инпут в зеленый цвет, если от десяти до двадцати - в желтый, а если более двадцати - в красный.