Si on utilise les dataSet HTML avec du JS, il est parfois inutile d’ajouter en plus des Classes.
Par exemple, dans un lecteur RSS j’ai la liste <ul> des flux <li>. Chaque élément contient une classe pour le mettre en couleur (par CSS) si le flux possède des éléments non-lus.
Cette classe est mise à jour en JS : si je marque un élément comme "lu" et que le nombre d’éléments "non-lu" de ce flux atteint 0, alors la classe est supprimée et l’élément <li> est masqué.
C’est tout à fait classique et ça marche.
Mais on peut faire plus simple.
Ici, le nombre d’éléments "non-lu" est stocké dans un dataSet sur le <li>. Ainsi : <li data-nb-unread="4">. Quand j’en marque un comme "lu", ce compteur est descendu à 3, naturellement, à l’aide de JS :
li.dataset.nbUnread -= 1;
Ici, plutôt que de poursuivre le code JS, avec un test sur le "nbUnread" pour voir s’il est égal à 0 et s‘il faut oui ou non retirer la classe "has-unread", on laisser tomber la classe et on teste directement l’attribut "data-nb-unread" en CSS :
CSS :
#feed-list li:not([data-nbrun="0"]) { … }
Ça mettra en valeur tous les <li> qui ont des éléments "non-lus" (compteur différent de "0"), exactement comme une classe.
L’avantage ici est d’avoir moins de code JS (donc plus rapide et mieux maintenable), moins d’attributs (arbre HTML plus simple à lire). L’inconvénient c’est que le CSS travail un peu plus : tester un attribut est plus lent que tester une classe.
Dans tous les cas, l’astuce est pratique et permet de réduire un peu le code JS.
Je trouve ça toujours aussi fascinant, de voir ici le HTML, le CSS et le JS interagir comme un tout. Oui c’est trivial, normal, ou ce que vous voulez, mais je trouve ça beau quand-même.