Чередование стилей через data- атрибут в JavaScript

Для решения проблемы, описанной в предыдущем уроке, мы не будем задавать элементу классы, а будем менять значение data- атрибута. Это будет удобно тем, что такой атрибут может иметь только одно значение и при записи новое значение само будет затирать старое.

Для примера вот так мы зададим успешный стиль:

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

А так стиль для ошибки:

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

Стили наших состояний мы зададим через селекторы атрибутов:

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

Теперь мы легко можем покрасить наш элемент в успешный цвет:

javascriptelem.dataset.type = 'success';

А так мы покрасим в цвет ошибки:

javascriptelem.dataset.type = 'error';