Changer couleur lien avec javascript

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par sigma2008, 5 Décembre 2016.

  1. sigma2008
    sigma2008 WRInaute impliqué
    Inscrit:
    18 Juin 2008
    Messages:
    753
    J'aime reçus:
    4
    Bonjour, j'ai ce code qui ne fonctionne pas (le code change la couleur du lien en choisissant la couleur dans input):

    Code:
    <script>
    function colorDiv1() {
        var selection = document.getElementsByTagName('lienmenu').value;
        document.getElementById("#menu li a").style.backgroundColor = selection;
    }
    </script>
    <input value="#000000" type="color" id="lienmenu" name="lienmenu" onchange="colorDiv1()">
    
    <div id="menu">
    <ul>
    <li>
    <a href="">Bonjour tout le monde</a>
    </li>
    </ul>
    </div>
    
    J'utilise le même code pour changer la couleur d'un (#menudroit) avec ce code :

    Code:
    document.getElementById("menudroit").style.backgroundColor = selection;
    
    ça marche parfaitement mais pour (#menu li a) ça ne marche pas, j'ai essayé querySelectorAll et querySelector ça ne marche pas aussi !

    PS : j'insiste à utiliser #menu li a
    Merci pour votre aide ^^
     
  2. Furtif
    Furtif WRInaute accro
    Inscrit:
    9 Août 2005
    Messages:
    2 530
    J'aime reçus:
    152
    Ce serait plus simple de faire ton hover sur un lien avec 4 lignes de CSS..

    Autant eviter de javascript pour ca..
     
  3. niap
    niap WRInaute discret
    Inscrit:
    17 Octobre 2009
    Messages:
    139
    J'aime reçus:
    0
    Normal que ça ne fonctionne pas.
    document.getElementById("#menu li a") ne te donnera aucun résultat, si tu veux faire un tel sélecteur il faut jQuery.
    Et getElementsByTagName ne te renverra rien non plus dans ce cas, n'est pas approprié non plus, il faut sélectionner par id.
    Code:
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script>
    function colorDiv1() {
        var selection = $('#lienmenu').val();
        $("#menu li a").css('background-color', selection);
    }
    </script>
    
     
  4. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    8 841
    J'aime reçus:
    249
  5. UsagiYojimbo
    UsagiYojimbo WRInaute accro
    Inscrit:
    23 Novembre 2005
    Messages:
    11 875
    J'aime reçus:
    72
    +1.
     
  6. niap
    niap WRInaute discret
    Inscrit:
    17 Octobre 2009
    Messages:
    139
    J'aime reçus:
    0
    Oui aussi :)
    Code:
    <script>
    function colorDiv1() {
    	var selection = document.getElementById('lienmenu').value;
    	var el = document.querySelectorAll("#menu li a");
    	for(i = 0; i < el.length; i++){
    		el[i].style.backgroundColor = selection;
    	}
    }
    </script>
    
     
  7. sigma2008
    sigma2008 WRInaute impliqué
    Inscrit:
    18 Juin 2008
    Messages:
    753
    J'aime reçus:
    4
    @niap ça marche parfaitement merci :D
     
Chargement...
Similar Threads - Changer couleur lien Forum Date
Changer l'aspect de la palette des couleurs sur Prestashop e-commerce 10 Janvier 2013
Changer la couleur d'un pixel sur une image en php Développement d'un site Web ou d'une appli mobile 2 Mai 2011
jQuery : changer la couleur d'un input Développement d'un site Web ou d'une appli mobile 19 Janvier 2010
Le monde vient de changer (Bert inside) Référencement Google Mardi à 13:11
Article fixe avec bannière changer souvent Crawl et indexation Google, sitemaps 9 Octobre 2019
Changer de mot clé ? Référencement Google 5 Août 2019
Changer la police de la SERP Référencement Google 16 Juillet 2019
Changer mon url canonique oui / non ? Débuter en référencement 26 Mai 2019
Changer de nom de domaine tout en recyclant l'ancien pour un autre site Problèmes de référencement spécifiques à vos sites 27 Février 2019
changer les meta title trop souvent est il négatif? Débuter en référencement 29 Décembre 2018
  1. Ce site utilise des cookies. En continuant à utiliser ce site, vous acceptez l'utilisation des cookies.
    Rejeter la notice