Utiliser une variable pour changer background-color

Résolu/Fermé
metalcat
Messages postés
74
Date d'inscription
dimanche 23 novembre 2003
Statut
Membre
Dernière intervention
27 septembre 2021
- 9 mai 2016 à 15:17
 metalcat - 22 mai 2016 à 13:48
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



1 réponse

Pitet
Messages postés
2785
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
25 mai 2022
528
9 mai 2016 à 16:23
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
74
Date d'inscription
dimanche 23 novembre 2003
Statut
Membre
Dernière intervention
27 septembre 2021
7
9 mai 2016 à 23:41
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
74
Date d'inscription
dimanche 23 novembre 2003
Statut
Membre
Dernière intervention
27 septembre 2021

22 mai 2016 à 13:48
Salut,
J'ai adopté l'astuce du nth-child et ça convient très bien à ce que j'ai besoin. Merci.
0
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