Sujet Précédent Sujet Suivant

Utiliser une variable pour changer background-color

Résolu/Fermé
metalcat Messages postés 75 Date d'inscription dimanche 23 novembre 2003 Statut Membre Dernière intervention 11 juin 2022 - 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



A voir également:

1 réponse

Réponse 1 / 1
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 526
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 75 Date d'inscription dimanche 23 novembre 2003 Statut Membre Dernière intervention 11 juin 2022 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 75 Date d'inscription dimanche 23 novembre 2003 Statut Membre Dernière intervention 11 juin 2022
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
Sunir
10 mai 2016 à 01:49
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