Compatibilité style Javascript

Bonjour,
Voilà, j'ai développé un petit script javascript pour l'adapter après à mon site ^^

Mais, voilà. Il est compatible pour chrome, safari (de Mac), chrome, explorer (windows) mais pas sur firefox sur les deux systèmes d'exploitation :(

Voilà le code de la maquette :

<div id="un" onclick="afficher('unS')">
</div>

<div id="deux" onclick="afficher('deuxS')">
</div>

<div id="trois" onclick="afficher('troisS')">
</div>

<div id="quatre" onclick="afficher('quatreS')">
</div>

<div style="width: 100%; height: 200px;"></div>

<div id="unS">
</div>

<div id="deuxS">
</div>

<div id="troisS">
</div>

<div id="quatreS">
</div>

<style>
#un, #deux, #trois, #quatre
{
width: 200px;
height: 200px;
background: blue;
float: left;
margin-left: 5px;
margin-bottom: 5px;
}

#unS, #deuxS, #troisS, #quatreS
{
width: 200px;
height: 200px;
background: red;
float: left;
margin-left: 5px;
margin-bottom: 5px;
}
</style>

<script>
function afficher(bloc)
{
var styleDuBloc = document.getElementById(bloc).style.background;
if (styleDuBloc === 'yellow')
{
document.getElementById(bloc).style.background = 'red';
}

else
{
document.getElementById('unS').style.background = 'red';
document.getElementById('deuxS').style.background = 'red';
document.getElementById('troisS').style.background = 'red';
document.getElementById('quatreS').style.background = 'red';
document.getElementById(bloc).style.background = 'yellow';
}
}
</script>

Cordialement

3 réponses

  1. Ah pardon, je n'avais pas remarqué (O_o)

    Cela vient tout simplement du fait que il faudrait remplacer la ligne
    var styleDuBloc = document.getElementById(bloc).style.background;
    par
    var styleDuBloc = document.getElementById(bloc).style.backgroundColor;
    1. Trop cool ! ça marche maintenant. Merci de ton aide.
  2. Si tu cliques une deuxième fois sur le premier carré (dans le cadre de la capture), le carré jaune est censé redevenir rouge.
    1. Salut,

      Personnellement, ça marche sous firefox (version 7.0.1 / Windows 7)

      capture ...