11521 sujets

JavaScript, DOM et API Web HTML5

Colorer durablement un élément quand on clique dessus

Bonjour !

J'ai une liste d'utilisateurs (dans une<table>) et je voudrais que quand on clique sur un utilisateur (<td><a href="url_de_ma_page">utilisateur</a></td>) , son fond deviennent bleu durablement. J'ai essayé avec la fonction mouseup() mais le problème c'est que le fond de l'utilisateur reste bleu 1 seconde puis reprend la couleur initiale direct...

Merci d'avance pour votre aide... Smiley bawling
Modifié par Cherrygolo (28 Jun 2018 - 11:52)
mouseup() est une action un peu particulière, elle concerne le relachement du clic. Tu peux généraliser ta fonction sur un évènement "click".

Applique simplement une classe à ton <td> lors du clic, qui lui attribut la couleur de fond bleue. La classe restera de manière permanente (du moins, tant que l'utilisateur est sur la page).
Modifié par Nolan (28 Jun 2018 - 13:12)
Nolan , j'avais déjà essayé de faire ça mais ça ne marchait pas après c'est peut-être moi qui j'ai mal exécuté..

bazooka07 , non je l'ai essayé et ça ne marche pas parce que le changement d'apparence s'annule dès que la souris ne se trouve plus sur l'utilisateur.

J'ai eu une illumination il y a 1h le plus simple est de changer les propriétés css au chargement de ma page. J'ai fait en sorte que chaque utilisateur se trouve dans un lien menant vers la même page avec le nom de l'utilisateur comme paramètre du le lien. Du coup il me suffisait de récupérer la valeur du paramètre. Pour clarifier mes explications voici le code :


 //Variables
            var userClique; //utilisateur sélectionné
            var paramLien ; // paramètre du lien de la page
            var groupeOuInserer ; // groupe dans lequel on veut ajouter un utilisateur
            
            //Programme
            $(document).ready(function () {
                //récupération de la partie du lien après le "?"
                paramLien = window.location.search ;
                //récupération du nom d'utilisateur qui a été cliqué
                userClique = paramLien.substr(12);
                //changement d''apparence du lien sélectionné pour qu'il soit repérable
                document.getElementById(userClique).style.backgroundColor = "blue" ;
                document.getElementById(userClique).style.color = "white" ;
            });

Modifié par Cherrygolo (28 Jun 2018 - 16:05)
Meilleure solution
Perso, je n'aime pas trop coller du "style" dans les balises HTML.
Si la charte graphique ne convient pas, il faut plonger dans le code pour modifier les couleurs.

Il est plus élégant de jouer avec une class et des régles CSS dans le fichier CSS
https://developer.mozilla.org/fr/docs/Web/API/Element/classList
document.getElementById(userClique).classList.add('active');

.active {
    background: blue;
   color: #fff;
}
Sujet clos
Aller à