Utiliser une variable pour changer background-color

Résolu
metalcat Messages postés 75 Date d'inscription   Statut Membre Dernière intervention   -  
 metalcat -
Bonjour,
Je voudrais utiliser 2 variables pour changer le background-color qui se répète à tour de rôle dans mon JS mais je trébuche sur la syntaxe. J'ai cherché sur internet et essayé plusieurs combines mais ça ne marche pas. Voici le début de mon JS. Les 2 variables sont background_color et second_color.

var background_color ='#22427c'
var second_color = '#8f8f8f'
document.write("<div id=\"menu\"> ");

// <!-- accueil -->
document.write( "div class=\"menu\" id=\"accueil\" onmouseover=\"affiche()\" style=\"background:'+ second_color +'\">" );
document.write( " <a href=\"index.htm\">Accueil</a></div>" );

// <!-- galerie -->
document.write( "div class=\"menu\" id=\"galerie\" onmouseover=\"affiche()\" style=\"background:'+ background_color +'\">" );
document.write( " <a href=\"galerie.html\">Galerie</a></div>" );

// <!-- bibliothèques -->
document.write( "<div class='menu' id='bibliotheques' onmouseover=\"affiche('sousmenu3');\" onmouseout=\"affiche();\" style=\"background:'+ second_color +'\">" );
document.write( " <a href=\"#\" onclick=\"window.location.reload()\">Bibliothèques</a>" );
document.write( " <div class=\"sousmenu\" id=\"sousmenu3\" style=\"display:none\" onmouseout=\"affiche();\" >" );
document.write( " <div><a href=\"http://homeusers.brutele.be/offline.html\">Phase 1</a></div>" );
document.write( " <div><a href=\"http://homeusers.brutele.be/offline.html\">Phase 2</a></div>" );

document.write( " </div>" );
document.write( " </div>" );


Si quelqu'un pouvait m'aider. D'avance merci.

Guy



A voir également:

1 réponse

Réponse 1 / 1
Pitet Messages postés 2826 Date d'inscription   Statut Membre Dernière intervention   527
 
Salut,

Il serait plus simple de gérer ceci uniquement en css et html si il n'y a pas de besoin particulier de passer par javascript.

Une solution simple est d'appliquer une classe css pour toutes lignes pairs et une autre classe pour toutes les lignes impairs et de définir la couleur de fond via ces classes.
Une autre solution est de cibler directement en css les enfants pairs et impairs du menu via la pseudo classe nth-child et les mots clés odd et even (pairs et impairs), par exemple : 
<div id="menu">
    <div class="menu" id="accueil"><a href="/">Accueil</a></div>
    <div class="menu" id="galerie"><a href="/">Galerie</a></div>
    <div class="menu" id="biblio"><a href="/">Bibliotheque</a></div>
</div>


#menu > div:nth-child(even) {
  background-color: red;
}

#menu > div:nth-child(odd) {
  background-color: green;
}


Bonne journée,
0
metalcat Messages postés 75 Date d'inscription   Statut Membre Dernière intervention   7
 
Salut Pitet,
Merci pour ta réponse rapide. J'utilise déjà des CSS mais pas de cette manière.
Maintenant je ne connais pas ce 'nth-child(...)' que je vais étudier et essayer ses possibilités comme tu le suggère.
Je te tiens au courant.
0
metalcat > metalcat Messages postés 75 Date d'inscription   Statut Membre Dernière intervention  
 
Salut,
J'ai adopté l'astuce du nth-child et ça convient très bien à ce que j'ai besoin. Merci.
0
Sunir
 
Salut,

oubliez document write qui n'est pas vraiment efficace ni pratique.

Pour changer la couleur du fond interactivement ce n'est pas une question de variables mais d'événements. et beaucoup beaucoup plus pratique le DOM et la syntaxe objet pointée(le '.' est utilisé pour accéder aux méthodes des objets du modèle du document.)

exemple avec explication:

http://www.w3schools.com/jsref/prop_style_backgroundcolor.asp
0