Alternanza di stili tramite attributo data- in JavaScript

Per risolvere il problema descritto nella lezione precedente, non assegneremo classi all'elemento, ma cambieremo il valore dell'attributo data-. Questo sarà conveniente perché un tale attributo può avere un solo valore e durante la scrittura il nuovo valore sovrascriverà automaticamente quello vecchio.

Ad esempio, in questo modo imposteremo lo stile di successo:

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

E lo stile per l'errore in questo modo:

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

Imposteremo gli stili dei nostri stati tramite selettori di attributi:

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

Ora possiamo facilmente colorare il nostro elemento con il colore di successo:

javascriptelem.dataset.type = 'success';

E in questo modo lo coloreremo con il colore di errore:

javascriptelem.dataset.type = 'error';