Växling av stilar via data-attribut i JavaScript

För att lösa problemet som beskrivs i föregående lektion, kommer vi inte att tilldela elementen klasser, utan vi kommer att ändra värdet på data- attributet. Detta är bekvämt eftersom ett sådant attribut bara kan ha ett värde och när ett nytt värde sätts kommer det automatiskt att skriva över det gamla.

Till exempel, så här sätter vi en framgångsrik stil:

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

Och så här stilen för ett fel:

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

Vi sätter stilarna för våra tillstånd genom attributväljare:

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

Nu kan vi enkelt färga vårt element i en framgångsrik färg:

javascriptelem.dataset.type = 'success';

Och så här färgar vi i fel-färg:

javascriptelem.dataset.type = 'error';