28172 sujets

CSS et mise en forme, CSS3

Probleme changement couleur td avec firefox

Bonjour,

J'ai un problème concernant un tableau <table> ou je dois faire changer les couleurs quand on clique sur chaque cellule <td>.
Ca marche parfaitement avec chrome mais ca ne fonctionne pas avec firefox.

Voilà la fonction qui s'active quand on clique sur la cellule :


  $(document).ready(function () {
    $('td').click(function () {
	      
		if( this.style.background =="white") {
        $(this).css('background', '#26C7EB');
	        }
        else {
            $(this).css('background', 'white');
		}
            });
});


Voilà, j'arrive pas à voir ou est le problème avec firfefox.

Merci pour votre aide !
bernard
Modérateur
bonjour,

Il est possible de passer par les variables CSS et mettre celle-ci à jour sur chaque élément, ce sera plus simple que de retrouver le style pour un élément spécifique puis le modifier.

Dans la feuille de style , tu peut te servir de var() pour récuperer la valeur d'une variable CSS pour le background de tes td par exemple :

td {background: var(--myVar) }
/* ou eventullement y mettre aussi une valeur par défaut si il n'y a pas de valeur pour var() en place */
td {background: var(--myVar, gray) }


Pour le moment, tes td ont un bg de couleur gray

Coté JavaScript, tu peut ajouter au td un attribut style en même temps que le onclick pour y stocké une variable avec une valeur spécifique que chaque td utilisera individuellement.

Il ne reste plus qu'a changé cette valeur au click.

avec if et else if , tu peut tourner sur plusieurs variables.
exemple en passant par blanc, bleu puis jaune:

exemple en javaScript en tournant sur 3 couleurs.
for (let e of document.querySelectorAll("td")) {
  e.setAttribute("style", "--myVar:white"); // on ajoute l'attribut style + la variable
  e.addEventListener("click", function() {
    var bgvar = e.getAttribute("style");
    if (bgvar == "--myVar:white") {
      e.setAttribute("style", "--myVar:#26C7EB");
    }
    // d'autres conditions ?
    else if (bgvar == "--myVar:#26C7EB") {
      e.setAttribute("style", "--myVar:gold");
    }
    // et enfin
    else {
      e.setAttribute("style", "--myVar:white");
    }
  });
}


demo en ligne https://codepen.io/gc-nomade/pen/MWwoMqp


___________________________________________________

Sinon pour ta version jQuery, une autre methode serait de récuperer le background-color avec .get(0).style.backgroundColor pour ne récuperer que le background-color sans toutes les valeurs par défaut.

astuce vue ici : forum anglophone 
$(document).ready(function() {
  $("td")
    .css("background", "white")// pour éviter de cliquer 2 fois
    .click(function() {
      var bg = $(this).get(0).style.backgroundColor;
      if (bg == "white") {
        $(this).css("background", "#26C7EB");
      } else {
        $(this).css("background", "white");
      }
    });
});


https://codepen.io/gc-nomade/pen/dyoRxKy


Pour info, FF me retournait rgb(255,255,255) et pas white comme indiqué dans la feuille de style.( javaScript ou jQuery)
Modifié par gcyrillus (02 Mar 2020 - 19:59)
Sujet clos
Aller à