jQuery : Modifier temporairement un style puis revenir à la classe d'origine

Question

Disons que j'ai une classe nommée testThing :

.testThing
{
   background-color:#000000;
   float:left;
   height:50px;
   width:50px;
}

Et je veux pouvoir tester un changement de couleur d'arrière-plan pour n'importe quel contrôle de cette classe lors d'un clic sur un bouton :

function setColor(someColor) 
{
   jQuery('.testThing').css('background-color', someColor);
}

Mais je veux que l'utilisateur puisse revenir à la couleur d'origine (en cliquant à nouveau sur un bouton) en fonction de ce que la classe contient :

function resetClass()
{
   jQuery('#currentColor').removeClass('testThing');
   jQuery('#currentColor').addClass('testThing');
}

Cela semble fonctionner (mais ce n'est pas la meilleure façon de procéder), mais la couleur d'arrière-plan du contrôle n'est pas réinitialisée à la valeur d'origine contenue dans cette classe.

Maintenant, il faut que je comprenne pourquoi le fait d'enlever et d'ajouter ne réinitialise pas la classe OU que je trouve une meilleure façon de faire... vu qu'il semble idiot d'enlever et de réadapter la classe...

Answer 1

Je sais que c'est vieux, mais vous pouvez simplement mettre la valeur à une chaîne vide pour supprimer votre style personnalisé comme ceci :

// set
$(this).css('background-color', '#000000');

// reset
$(this).css('background-color', '');

Answer 2

Jquery ajoute du CSS dans l'attribut style qui a une priorité plus élevée que ce qui se trouve dans votre fichier CSS. Vous ne modifiez pas votre document CSS avec cette fonction et, par conséquent, l'ajout, la suppression et l'ajout de la classe n'ont aucun effet puisqu'ils n'ont pas été modifiés du tout !

Vous devez utiliser la même fonction, mais cette fois-ci, la couleur d'arrière-plan doit être noire.

function reset(this)
{
  $(this).css('background-color', '#000000');
}

Ou simplement supprimer l'attribut de style

function reset(this)
{
  $(this).removeAttr('style');
}

Answer 3

Qu'en est-il de toggleClass("testThing") ? Je l'utilise lorsqu'il y a plus d'une propriété à modifier.

http://api.jquery.com/toggleClass/

Answer 4

Il est préférable d'ajouter une autre classe qui remplace le style que vous souhaitez modifier, puis de la supprimer. C'est mieux que de coder en dur les informations de style à l'intérieur du js. Le seul problème est que vous devrez vous assurer que la classe ajoutée est d'un ordre supérieur afin que l'élément prenne le style de cette classe plutôt que de la classe existante, mais ce n'est pas difficile à assurer.