Changer la valeur d'un backGround

**jubourbon** · 12/02/2009, 11h31

Bonjour,

Je souhaiterais creer une fonction JavaScript toute simple, qui modifie la valeur de la prorpiété background d'une balise span, lorsque je clique dessus.
J'ai effectué des recherches pour comprendre javascript (que je ne connais pas tres bien), et voici le resultat qui ne fonctionne pas:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
function ChangeColor(){
var laValeur=document.getElementById("span_span").style.backgroundColor;
switch (laValeur) {
case "#FF0000":
document.getElementByID("span_span").style.backgroundColor='#FF6600';
break;
case '#FF6600':
document.getElementById("span_span").style.backgroundColor='#00FF00';
break;
case '#00FF00':
document.getElementById("span_span").style.backgroundColor='#999999';
break;
case '#999999':
document.getElementById("span_span").style.backgroundColor='#FF0000';
break;
default: 
alert('rien trouvé');
break;
}

Et j'arrive toujours sur l'alerte "rien trouvé".
Dans ma page voici ma balise span:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<span id='span_span' onclick='ChangeColor()' style='background-color:#FF0000; width:8px; height:24px;'>blabla</span>

Quelqu'un peut t il m'eclairer et m'expliquer pourquoi cela ne fonctionne pas?

Merci

**marcha** · 12/02/2009, 11h34

Salut,

fait un alert(laValeur) avant le switch, je pense que tu aura la couleur
en notation rgb(r,g,b) (à vérifier).

**jubourbon** · 12/02/2009, 11h42

il me renvoi bien #FF0000
on dirai que le switch ne capte pas la valeur

**jubourbon** · 12/02/2009, 11h53

J'ai trouvé:
La fonction renvoi le numero de couleur en minuscule, et mon switch compare des valeur en majucsule.

**marcha** · 12/02/2009, 11h58

Salut,

Chez moi il m'affiche "rgb(255,0,0)" (sous FireFox)

**marcha** · 12/02/2009, 12h13

Envoyé par jubourbon

J'ai trouvé:
La fonction renvoi le numero de couleur en minuscule, et mon switch compare des valeur en majucsule.

Prends garde au fait que tous les navigateurs ne retournent pas la
couleur au même format.

**franculo_caoulene** · 12/02/2009, 12h23

En fait, c'est plus traître que ça. Selon le navigateur j'obtiens des résultats différents. En exécutant ce test :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr">
<head>
   <title>attacher plusieurs évènements sur un élément</title>
   <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
   <style type="text/css">
      #d {width:200px;height:200px;background:#ccc;}
   </style>
</head>
<body>
   <div id="d" style="background-color:#00f;"></div>
   <script type="text/javascript">
   alert(document.getElementById("d").style.backgroundColor);
   </script>
</body>
</html>

J'obtiens sous FF et Safari : "rgb(0, 0, 255)" (sans oublier l'espace après les virgules)
sous IE : "#00f" (la valeur saisie)
sous Opera : "#0000ff"

Il faudrait peut-être passer pas des classes CSS.

edit: grillé, mais j'ai l'habitude

Changer la valeur d'un backGround

JavaScript

Discussions similaires

Partager

Partager