Come utilizzare getElementsByClassName nella funzione javascript?

Non riesco a capire come utilizzare più ID in javascript. Nessun problema con ID singolo e getElementById, ma appena cambio ID in class e provo con getElementsByClassName la funzione smette di funzionare. Ho letto circa 100 post sull’argomento; non ho ancora trovato la risposta, quindi spero che qualcuno qui sappia come far funzionare getElementsByClassName.

Ecco un codice semplice che ho usato per i test:

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

getElementsByClassName() restituisce un nodeList HTMLCollection *. Stai cercando di operare direttamente sul risultato; è necessario scorrere i risultati.

 function change_boxes() { var boxes = document.getElementsByClassName('boxes'), i = boxes.length; while(i--) { boxes[i].style.backgroundColor = "green"; } } 

* aggiornato per riflettere i cambiamenti nell’interfaccia

getElementsByClassName Restituisce un insieme di elementi che hanno tutti i nomi di class dati

 var elements = document.getElementsByClassName('boxes'); for(var i=0, l=elements.length; i 

getElementsByClassName restituisce un elenco di elementi in modo che tu debba scorrere iteramente e impostare gli stili su ciascun elemento uno per uno. Ha anche un supporto limitato in IE, quindi potresti stare meglio usando jQuery:

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