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:

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

E lo stile per l'errore in questo modo:

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

Imposteremo gli stili dei nostri stati tramite selettori di attributi:

[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:

elem.dataset.type = 'success';

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

elem.dataset.type = 'error';

È dato un input. Alla perdita del focus, verificate il numero in esso inserito. Se questo numero è fino a dieci, colorate l'input di verde, se è da dieci a venti - di giallo, e se è superiore a venti - di rosso.