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 classe 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.Come utilizzare getElementsByClassName nella funzione javascript?

Heres un certo codice semplice che ho usato per la prova:

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>

fonte

2013-01-03 jan199674

Come suggerisce il nome, la funzione restituisce un elenco ** ** di elementi: https://developer.mozilla.org/ it/docs/DOM/document.getElementsByClassName. –

possibile duplicato di [Cosa c'è di sbagliato in questa chiamata getElementsByClassName in Javascript?] (Http://stackoverflow.com/questions/3391791/what-is-wrong-with-this-getelementsbyclassname-call-in-javascript) e [Can getElementsByClassName cambia stile?] (http://stackoverflow.com/questions/10693845/can-getelementsbyclassname-change-style) e molto altro, che può essere trovato nella colonna di destra. –

Altri duplicati: http://stackoverflow.com/q/3349332/218196, http://stackoverflow.com/q/12377734/218196, http://stackoverflow.com/q/13667533/218196. –

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 il cambiamento nell'interfaccia

fonte

2013-01-03 16:13:39 Mathletics

Thx - funzionante bene. Non sono sicuro di aver capito perché - copio la tua soluzione nel progetto più grande su cui sto lavorando e spero di poterlo fare anche lì – jan199674

@Kenneth: 'getElementsByClassName' restituisce tutti gli elementi con quel nome di classe, cioè ** più ** elementi . Per cambiare le proprietà di questi elementi devi scorrere l'elenco degli elementi. –

Hmm - ho un altro problema che non riesco a capire. Ho 20 pulsanti sulla stessa pagina usando lo stesso stile. I pulsanti sono div-class e selezionati da onClick con il codice di lavoro di Mathletics. Ogni pulsante è composto da 2 pulsanti che cambiano posizione in base a z-index quando si fa clic e presentano una nuova immagine per ogni pulsante. – jan199674

getElementsByClassName Restituisce un insieme di elementi che hanno tutti i nomi delle classi indicate

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

fonte

2013-01-03 16:16:35 Scipion

getElementsByClassName restituisce un elenco di elementi in modo che tu abbia bisogno di scorrere attraverso di loro e impostare il stili su ogni oggetto uno per uno. Ha anche un supporto limitato in IE, per cui si potrebbe essere meglio utilizzare jQuery:

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

fonte

2013-01-03 16:17:33 JLRishe

Come utilizzare getElementsByClassName nella funzione javascript?

risposta

Problemi correlati