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

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

← →
↑
en ru