Jak korzystać z funkcji getElementsByClassName w funkcji javascript?

Question

Nie mogę zrozumieć, jak używać wielu identyfikatorów w javascript. Nie ma problemu z pojedynczym identyfikatorem i getElementById, ale gdy tylko zmienię identyfikatory na klasy i spróbuję użyć funkcji getElementsByClassName, funkcja przestanie działać. Czytałem o 100 post na temat; wciąż nie znalazłem odpowiedzi, więc mam nadzieję, że ktoś tutaj wie, jak sprawić, by getElementsByClassName działało.

Herezje jakiś prosty kod, który użyłem do testowania:

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> 

Answer 1

getElementsByClassName() zwraca nodeListHTMLCollection *. Próbujesz działać bezpośrednio na wynik; musisz powtórzyć wyniki.

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

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

---

* aktualizowane w celu odzwierciedlenia zmian w interfejsie

Answer 2

getElementsByClassName Zwraca zestaw elementów, które mają wszystkie imiona klasy

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

Answer 3

getElementsByClassName zwraca listę elementy, więc musisz ich powtórzyć i ustawić style na każdym elemencie jeden po drugim. Ma także ograniczone wsparcie w IE, więc może być lepiej wyłączyć za pomocą jQuery:

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