Réinitialiser la valeur d'un attribut [Résolu]

Bonjour,

Je suis confronté à un problème de JavaScript & CSS bloquant, et je n'arrive pas à m'en sortir.

J'ai un élément td dans mon code HTML, avec un style CSS qui lui est appliqué.

<table>
 <tr>
  <td class="monStyle">
   Yaha !
  </td>
 </tr>
</table>

Ce style CSS défini dans mon header et contient (entre autre) un attribut background-image avec une première image :

td.monStyle {
 background-image: url(http://domain/image1.png);
}

Dans ma page, un JavaScript doit venir modifier cet attribut. Jusque là, pas de problème, un petit getElementById suivi de la modification de l'attribut style.backgoundImage fonctionne très bien :

document.getElementById('monTD').style.backgroundImage = url(http://domain/image2.png);

Mais là ou je bloque, c'est quand je veux que mon JavaScript "annule" sa modification. En effet, j'aimerais que mon attribut retrouve la valeur de la classe CSS qui lui est attribuée. J'aimerais retrouver cette ancienne valeur, sans avoir à re-spécifier l'URL de l'image contenue dans la classe CSS.

Est-ce possible ?
Si oui, comment ?

Merci d'avance.
Modifié par Mardull (21 Nov 2011 - 17:18)

Hello.

Plutôt que modifier le style d'un élément via JS, mieux vaux déclarer ces styles dans une classes en CSS, et l'ajouter/retirer via JS.

Merci de ta réponse.
Ça aurait pu être une solution en effet, mais ce style est également appliqué à d'autres éléments dans ma page HTML, et je ne souhaite modifier mon background que pour un seul élément bien particulier. Donc modifier le style n'est pas une bonne solution pour moi.
Modifié par Mardull (21 Nov 2011 - 12:43)

Hello,

Un simple if avec un écouteur te suffirais pas ?

CSS

.monStyle {background: url(image1.png)}
.monAutreStyle {background: url(image2.png)}

Et via JS tu ajoutes ou retires la classe monAutreStyle. Ça n'écrasera pas la règle pour les autres éléments.

Chum a écrit :
Hello,

Un simple if avec un écouteur te suffirais pas ?

Excuse-moi, mais je ne vois pas ce qu'est un "écouteur" ?

Florian_R a écrit :
CSS

.monStyle {background: url(image1.png)}
.monAutreStyle {background: url(image2.png)}

Et via JS tu ajoutes ou retires la classe monAutreStyle. Ça n'écrasera pas la règle pour les autres éléments.

J'avais effectivement pensé à "contourner" ce problème avec des classes supplémentaires. Cependant, le morceau de code qui me pose problème fait partie d'une application de génération HTML/CSS lourde, et j'essaye d'éviter une modification du générateur HTML/CSS.

Je reviens donc sur ma question initiale : Est-il possible d'annuler la modification que fait mon JavaScript ?

Si je ne trouve pas de solution pour annuler cette modification, alors je passerais certainement par une nouvelle classe CSS.
Modifié par Mardull (21 Nov 2011 - 14:06)

C'est sur quel événement que ton "monTD" dois changer ?
Car si c'est sur un ".click" tu peux (je crois car je débute en Jquery):

$('monTD').bind('click',function(){
   if(background-actuel == background2){
       //style background1
   }else if(background-actuel == background1){
       //style background2
   }
})

ça te permet de de faire ton switch... (je suis toujours pas sur de bien cerné si c'est ce que tu cherche...)
Modifié par Chum (21 Nov 2011 - 14:53)

Effectivement...

document.getElementById('monTD').style.backgroundImage = '';

Ce morceau de code fonctionne. Je devais avoir une autre erreur quelque part... Je m'en vais chercher ça !

Merci