Como usar getElementsByClassName na function javascript?

Não consigo descobrir como usar vários IDs no javascript. Não há problema com ID único e getElementById, mas assim que eu altero os IDs para a class e tento usar getElementsByClassName, a function pára de funcionar. Eu li sobre um post de 100 sobre o tópico; Ainda não encontrei a resposta, então eu espero que alguém aqui saiba como fazer o trabalho getElementsByClassName.

Heres algum código simples que eu usei para testar:

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

getElementsByClassName() retorna um nodeList HTMLCollection *. Você está tentando operar diretamente no resultado; você precisa percorrer os resultados.

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

* atualizado para refletir a mudança na interface

getElementsByClassName Retorna um conjunto de elementos que possuem todos os nomes de classs

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

getElementsByClassName retorna uma lista de elementos para que você precise iterá-los e definir os estilos em cada item, um por um. Ele também tem suporte limitado no IE, então é melhor usar o jQuery:

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