Changer le background d'une class

Version imprimable

30/10/2017, 16h43
nektarfl

Changer le background d'une class

Bonjour,

Dans une page liée à des statistiques, j'ai des listes (3) de client rangées par ordre décroissant de chiffre d'affaire réalisés. (1 liste des clients depuis le début d'activité - 1 sur 12 mois glissants et 1 depuis le début de l'année civile - ces listes permettent rapidement d'identifier un client en perte de vitesse, et le fait de changer le fond des clients permet de retrouver plus facilement leur noms dans les autres listes)

Pour l'instant, ma page est statique et ne réalise que l'affichage.
Je désire l'améliorer en faisant en sorte que quand je passe la souris sur le nom d'un client, le même client se retrouve avec un fond changé de couleur sur les 2 autres listes.
J'ai donc attribué une classe à chaque zone de div de la liste : client+id_client en numérique.
Au départ, mes class n'ont aucun attribut.
Sur mes div, je fais un accès à un sous programme (hover) qui doit visualiser les autres listes avec en passage le numéro id du client.
Jusque là, aucun soucis de fonctionnement, mais un doute m'assaille au moment de vouloir établir une modification du fond de ma div: A quel élément je définis mon background? Dans le meilleur des cas, c'est à ma class que j'attribue un backgroundcolor.

Si j'utilise document.getElementsByClassName(names); je vais me retrouver avec mes div (de 1 à 3 selon l'endroit ou on se trouve dans l'une des 3 listes), or, c'est la class que je veux modifier.
Il me faudrait un getClassName(nom) mais je n'ai pas trouvé cette fonction sur le net.

Est-ce qu'il existe une possibilité, est-ce que j'ai loupé quelque chose?

Je précise qu'ayant jusqu'à 3 champs portant le même nom de classe, il m'est impossible de définir des Id, ce qui m'aurait simplifié la tâche.
Je précise aussi que je n'utilise pas JQuery et que les solutions avec cette base ne me correspondront pas.

Merci à toutes les pistes qui me seront avancées.
30/10/2017, 17h40
Geoffrey74

Hello,

est-ce possible de montrer un bout de code, afin de se rendre compte plus aisément de la structure du code ? Parceque là j'suis pas certain d'avoir bien saisi comment le code est fait, du coup c'est plus dure pour t'aider.

Je reconnais que ce n'est pas évident de coller une partie du code parce que tout est lié dans une page

En gros, je crée mes liste avec ce bout de code
Code:

1 2 3 4 5 6 7 8 9 10 var div=document.getElementById("statclientdebutlist"); div.innerHTML=""; //on vide compl春ement une 思entuelle ancienne liste cr試e) dans une boucle, je crée mes lignes de ma liste : var elem1 = document.createElement("div"); class="client"+ligne[4]; elem1.setAttribute("class",class); hover="vizualise("+ligne[4]+")"; elem1.setAttribute("hover",hover); div.appendChild(elem1);
J'ai donc des éléments qui possèdent un nom de classe client avec son numéro accolé

le programme est visible là : http://gestion1.ressorts.org . On peut rentrer avec les valeurs indiquées pour essayer, c'est dans le menu statistiques - clients.

avec ma fonction vizualise(idcli) sur laquelle je bute
Code:

1 2 3 4 5 6 7 8 9 10 11 12 function vizualise(idcli) { //récupération d'une ancienne valeur oldid=getvaleur("statvisu"); if (oldid!="") { // si elle existe, on doit retirer le background de la classe class="client"+oldid; //document.getElementById(class) // =>j'ai commencé à écrire ceci, mais en y réfléchissant, c'est ma classe que je veux changer, pas un seul élément } // attribution de la nouvelle valeur setvaleur("statvisu",idcli); }
Ma page restant constamment à l'écran, je stocke mes variables dans un < input type="text" > dans un div caché
mes fonctions getvaleur et setvaleur me permettent de simplifier l'attribution et la récupération avec mes input

Dans l'idéal, je voudrais pouvoir écrire :
classeelmt=document.getClass(class).background=""; pour l'effacer et ="#ACCF7D" pour mieux localiser le même nom dans les autres listes.

Comme je le dis, pas facile de mettre qu'une partie du code en gardant une lisibilité, et pas facile de mettre tout le code, il y en a tellement !!!

30/10/2017, 23h14
mathieu

au lieu de modifier une règle CSS, une autre approche serait d'ajouter une classe "mettreEnSurbrillance" aux 3 éléments retournés par getElementsByClassName.
et donc en cas de changement de client, il faut d'abord retirer la classes au client précédent.
31/10/2017, 06h12
nektarfl

Merci de vos réponses.

Cela confirme bien ce que je n'ai pas trouvé non plus sur le net à force de recherches...
Il semble impossible de modifier une class par l'intermédiaire du javascript et c'est bien dommage car cela aurait grandement simplifié l'écriture du code (oui, ayant commencé à programmer avec un ZX81 n'ayant que 1Ko de mémoire vive, j'ai pris l'habitude de tenter de raccourcir au maximum mon code)

Je vais donc être obligé de définir des id différents pour chacune de mes listes mais avec la possibilité de les retrouver facilement. (je n'ai que 3 listes, il me sera facile de créer les id suivants : client-id-num ou l'id est l'id client et ou num est mon numéro de la liste de 1 à 3
Au moment de leur ajouter/rétirer la classe supplémentaire, ça sera plus facile à gérer

Cette discussion n'est pas résolue, je suis obligé de contourner un truc qui n'a pas été prévu.
31/10/2017, 07h32
nektarfl

Citation:

Envoyé par mathieu

au lieu de modifier une règle CSS, une autre approche serait d'ajouter une classe "mettreEnSurbrillance" aux 3 éléments retournés par getElementsByClassName.
et donc en cas de changement de client, il faut d'abord retirer la classes au client précédent.

Justement, comment je supprime une des classe et seulement une?
Si j'attribue class avec la valeur "mettreEnSurbrillance", mon ancienne classe s'efface, et adieu le réaffichage !!!

Donc en réfléchissant un petit peu, je cherche mes class "mettreEnSurbrillance" pour rétablir ma classe client(id) initiale (sachant que j'ai conservé l'id du client en cours d'affichage)

C'est quand même pas simple ces manips!!
31/10/2017, 08h19
SpaceFrog

addClass(), removeClass()

merci à tous, j'ai réussi à obtenir l'effet escompté, même si je ne l'ai pas obtenu de la manière escomptée, le principal est d'arriver au but avec un code qui est assez facile à maintenir.

J'ai donc changé quelque chose dans ma déclaration de div :
Code:

1 2 3 4 5 6 divid="client"+ligne[4]; elem1.setAttribute("class",divid); hover="vizualise("+ligne[4]+")"; sortie="devizu("+ligne[4]+")"; elem1.setAttribute("onmouseover",hover); elem1.setAttribute("onmouseout",sortie);
J'ai rajouté une fonction onmouseout, ainsi, quand la souris sort de la liste, les objets se désactivent

Et avant de voir le post ci-dessus, j'ai modifié mes deux routines
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 function vizualise(idcli) { classe="client"+idcli; // recréation de la classe avec l'id client champs=document.getElementsByClassName(classe); // récupération de la liste des éléments concernés for (i=0;i<champs.length;i++) { champs[i].classList.add("surligne"); // traitement individuel ajout surlignage } } function devizu(idcli) { classe="client"+idcli; // recréation de la classe avec l'id client champs=document.getElementsByClassName(classe); // récupération de la liste des éléments concernés for (i=0;i<champs.length;i++) { champs[i].classList.remove("surligne"); // traitement individuel suppression surlignage } } }
Pour moi, le sujet est désormais résolu, et comme d'habitude, un grand merci à tous ceux qui m'ont donné des pistes.