Je n'arrive pas à faire fonctionner document.getElementsByClassName lorsque je clique sur un bouton. Je peux faire fonctionner le document.getElementById, mais pas la classe. Quelqu'un peut-il m'expliquer pourquoi la classe ci-dessous ne fonctionne pas, s'il vous plaît?

document.getElementById('footer').style.background = 'rgba(189, 195, 199,1.0)';
document.getElementsByClassName('menulink').style.background = 'rgba(189, 195, 199,1.0)';

J'ai mis les classes dans ma page html:

<ul class="nav navbar-nav navbar-right">
                <li><a class="menulink" href="index3.html">Home</a></li>
                <li class="active"><a class="menulink" href="#">Coca Cola</a></li>
                <li><a class="menulink" href="#">Sprite</a></li>
                <li><a class="menulink" href="#">Dr Pepper</a></li>
</ul>
1
eth3king 5 mars 2016 à 20:55

3 réponses

Meilleure réponse

Document.getElementsByClassName ()

MDN

Renvoie un objet de type tableau de tous les éléments enfants qui ont tous les noms de classe donnés.


Cela renvoie un objet, pas seulement une valeur. Vous devrez les référencer de la même manière que vous faites référence à n'importe quelle propriété d'un objet.

document.getElementsByClassName('className')["propertyName"].*action here*;

Dans votre cas, quelque chose comme ça pourrait fonctionner:

   var targets = document.getElementsByClassName("menulink");
   for (var i = 0; i < targets.length; i++) {
      targets[i].style.background = "rgba(189, 195, 199,1.0)";
   }
1
jacobherrington 5 mars 2016 à 18:04

GetElementById renvoie un seul élément, mais getElementsByClassName () renvoie une NodeList (notez le 's' sur getElementS). Cela fonctionnerait:

  document.getElementsByClassName('menulink')[0].style.background = 'rgba(189, 195, 199,1.0)';
1
Jav Rok 5 mars 2016 à 17:58

GetElementsByClassName renvoie la liste des éléments DOM.

Vous devez itérer sur chaque élément et devez définir le style, par exemple

    var links = document.getElementsByClassName('menulink');
    for(var i = 0; i < links.length; i++){
        links[i].style.background = 'rgba(189, 195, 199,1.0)';
    }
0
Durgaprasad Budhwani 5 mars 2016 à 18:03