Przełączanie stylów przez atrybut data- w JavaScript

Aby rozwiązać problem opisany w poprzedniej lekcji, nie będziemy ustawiać elementowi klas, lecz będziemy zmieniać wartość atrybutu data-. Będzie to wygodne, ponieważ taki atrybut może mieć tylko jedną wartość i podczas zapisu nowa wartość automatycznie nadpisze starą.

Dla przykładu, w ten sposób ustawimy styl sukcesu:

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

A tak styl dla błędu:

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

Style naszych stanów ustawimy za pomocą selektorów atrybutów:

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

Teraz możemy łatwo pokolorować nasz element na kolor sukcesu:

javascriptelem.dataset.type = 'success';

A tak pokolorujemy na kolor błędu:

javascriptelem.dataset.type = 'error';