Styles alternation with the data- attribute in JavaScript

To solve the problem described in the previous lesson, we will not assign classes to the element, but will change the value of the data- attribute. This will be convenient because such an attribute can have only one value, and when writing a new value, it will itself overwrite the old one.

For example, this is how we set a successful style:

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

And style for an error:

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

We will set the styles of our states through attribute selectors:

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

Now we can easily color our element in the successful color:

javascriptelem.dataset.type = 'success';

And now we paint in the color of an error:

javascriptelem.dataset.type = 'error';