Alternance de styles via l'attribut data- en JavaScript

Pour résoudre le problème décrit dans la leçon précédente, nous ne définirons pas de classes sur l'élément, mais nous changerons la valeur de l'attribut data-. L'avantage est qu'un tel attribut ne peut avoir qu'une seule valeur et lors de l'écriture, la nouvelle valeur écrasera automatiquement l'ancienne.

Par exemple, voici comment nous définirons le style de succès :

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

Et voici le style pour l'erreur :

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

Nous définirons les styles de nos états via les sélecteurs d'attributs :

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

Maintenant, nous pouvons facilement colorer notre élément en couleur de succès :

elem.dataset.type = 'success';

Et voici comment nous le colorons en couleur d'erreur :

elem.dataset.type = 'error';

Un champ de saisie est donné. Lors de la perte du focus, vérifiez le nombre qui y est entré. Si ce nombre est inférieur à dix, coloriez le champ en vert, s'il est entre dix et vingt - en jaune, et s'il est supérieur à vingt - en rouge.