Comment utiliser getElementsByClassName dans javascript-function?

Je n'arrive pas à comprendre comment utiliser plusieurs ID en javascript. Aucun problème avec ID unique et getElementById, mais dès que je change d'ID en classe et que j'essaie d'utiliser getElementsByClassName, la fonction cesse de fonctionner. J'ai lu environ 100 articles sur le sujet; toujours pas trouvé la réponse, donc j'espère que quelqu'un ici sait comment faire fonctionner getElementsByClassName.Comment utiliser getElementsByClassName dans javascript-function?

Heres un code simple que je l'ai utilisé pour les tests:

function change(){ 
    document.getElementById('box_one').style.backgroundColor = "blue"; 
} 

function change_boxes(){ 
    document.getElementsByClassName ('boxes').style.backgroundColor = "green"; 
} 


<input name="" type="button" onClick="change(document.getElementById('box_one')); change_boxes(document.getElementsByClassName('boxes'))" value="Click" /> 

<div id="box_one"></div> 
<div class="boxes" ></div> 
<div class="boxes" ></div>

Source

2013-01-03 jan199674

Comme son nom l'indique, la fonction retourne une liste ** ** des éléments: https://developer.mozilla.org/ en-US/docs/DOM/document.getElementsByClassName. –

duplicata possible de [Quel est le problème avec cet appel getElementsByClassName en Javascript?] (Http://stackoverflow.com/questions/3391791/what-is-wrong-with-this-getelementsbyclassname-call-in-javascript) et [Can getElementsByClassName change-t-il de style?] (http://stackoverflow.com/questions/10693845/can-getelementsbyclassname-change-style) et beaucoup plus, que l'on peut trouver dans la colonne de droite. –

Plus de doublons: http://stackoverflow.com/q/3349332/218196, http://stackoverflow.com/q/12377734/218196, http://stackoverflow.com/q/13667533/218196. –

getElementsByClassName() retourne un ~~nodeList~~HTMLCollection *. Vous essayez d'opérer directement sur le résultat; vous devez parcourir les résultats.

function change_boxes() { 
    var boxes = document.getElementsByClassName('boxes'), 
     i = boxes.length; 

    while(i--) { 
     boxes[i].style.backgroundColor = "green"; 
    } 
}

* mis à jour pour refléter le changement dans l'interface

Source

2013-01-03 16:13:39 Mathletics

Thx - fonctionne bien. Je ne suis pas sûr de comprendre pourquoi - ill copier votre solution dans le projet plus im sur et je l'espère, je peux le faire aussi bien – jan199674

@Kenneth: 'getElementsByClassName' retourne tous les éléments avec ce nom de classe, c'est à dire ** plusieurs ** éléments . Pour modifier les propriétés de ces éléments, vous devez parcourir la liste des éléments. –

Hmm - eu un autre problème que je ne peux pas comprendre. J'ai 20 boutons sur la même page en utilisant le même style. Les boutons sont div-class et sélectionnés par onClick avec le code de travail de Mathletics. Chaque bouton est en fait composé de 2 boutons qui changent de position en z-index quand on clique dessus et présente une nouvelle image pour chaque bouton. – jan199674

getElementsByClassName Renvoie un ensemble d'éléments qui ont tous les noms de classe donnée

var elements = document.getElementsByClassName('boxes'); 
for(var i=0, l=elements.length; i<l; i++){ 
elements[i].style.backgroundColor = "green"; 
}

Source

2013-01-03 16:16:35 Scipion

getElementsByClassName retourne une liste de éléments de sorte que vous auriez besoin de parcourir à travers eux et définir la styles sur chaque article un par un. Il a également un soutien limité dans IE, vous pourriez être mieux en utilisant jQuery:

$(".boxes").css("backgroundColor", "green");

Source

2013-01-03 16:17:33 JLRishe

Comment utiliser getElementsByClassName dans javascript-function?

Répondre

Questions connexes