Ottenere o modificare la proprietà della classe CSS con Javascript utilizzando lo stile DOM

Il mio obiettivo è modificare il colore di sfondo di una colonna in una tabella senza indirizzare ciascuna voce di dati singolarmente per ID o Nome. So che ci sono diversi modi per farlo, e ho provato 3 per essere precisi, e sto avendo problemi con ciascuno. Per semplicità e chiarezza, in questa domanda, sto chiedendo come farlo con successo usando l'oggetto element.style.backgroundColor nel DOM. Ecco il mio HTML:Ottenere o modificare la proprietà della classe CSS con Javascript utilizzando lo stile DOM

<!DOCTYPE html> 
<html> 
    <head> 
     <link rel="stylesheet" type="text/css" href="tester.css"> 
     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script> 
     <script type="text/javascript" src="tester.js"></script> 
    </head> 
    <body> 
    <button type="button" onClick="testerFunction()">Test</button> 
     <table> 
      <tr> 
       <th class="col1">Column 1 Header</th> 
       <th class="col2">Column 2 Header</th> 
      </tr> 
      <tr> 
       <td class="col1">R1 C1</td> 
       <td class="col2">R1 C2</td> 
      </tr> 
      <tr> 
       <td class="col1">R2 C1</td> 
       <td class="col2">R2 C2</td> 
      </tr> 
     </table> 
    </body> 
</html>

mio file CSS:

.col1{ 
    background-color:lime; 
}

E il mio file JavaScript:

function testerFunction() { 
    alert (document.getElementsByClassName('.col1').style.backgroundColor); 
}

quando l'eseguo ottengo più o meno lo stesso errore in IE, Firefox, e Chrome:

non può leggere la proprietà 'backgroundColor' di Undefined.

Ho la sensazione che abbia qualcosa a che fare con il tipo di dati restituito dall'oggetto document.getElementsByClassName DOM. Il sito web di riferimento afferma che restituisce una raccolta HTML. Altri posti che ho trovato dicono che restituisce una "lista" di elementi. Ho provato a creare un array e assegnare il risultato all'array e accedere a ciascun elemento dell'array con un loop, ma ho ottenuto lo stesso errore nello stesso punto. Potrebbe essere che io non so come gestire una "collezione". Ad ogni modo, mi aspettavo "lime" o l'equivalente hex o rgb perché è quello che ho definito nel file CSS. Voglio essere in grado di cambiarlo con Javascript. Qualsiasi aiuto sarebbe molto apprezzato. Grazie!

EDIT: Aggiunto argomenti alla risposta di Shylo Hana per renderlo più modulare

function testerFunction() { 
    changeColumnColor('col1','blue'); 
} 
function changeColumnColor(column,color) { 
    var cols = document.getElementsByClassName(column); 
    for(i=0; i<cols.length; i++) { 
     cols[i].style.backgroundColor = color; 
    } 
}

fonte

2013-10-14 jgrant

check out questo: http://api.jquery.com/css/ –

@ risposta di Shylo è corretta, getElementsByClassName restituisce un array, che ha sicuramente alcuna proprietà "stile" – xiaowl

Come già detto da Quynh Nguyen, non è necessario il '' nel className. Tuttavia, document.getElementsByClassName ('col1') restituirà una matrice di oggetti. Ciò restituirà un valore "non definito" perché un array non ha una classe. Avrai ancora bisogno di ciclo tra gli elementi ...

function changeBGColor() { 
    var cols =  document.getElementsByClassName('col1'); 
    for(i=0; i<cols.length; i++) { 
    cols[i].style.backgroundColor = 'blue'; 
    } 
}

fonte

2013-10-14 04:15:36

Questo ha funzionato semplicemente e magnificamente. Ho aggiunto alcuni argomenti per renderlo più modulare. Fatto una modifica al post per la formattazione. – jgrant

non hai bisogno di aggiungere '' nel tuo nome di classe. Questo farà

document.getElementsByClassName('col1')

Inoltre, poiché non l'ha definire il colore di sfondo tramite javascript, non sarà in grado di chiamare direttamente. Devi usare window.getComputedStyle() o jquery per ottenere ciò che stai cercando di fare sopra.

Ecco un esempio di lavoro

http://jsfiddle.net/J9LU8/

fonte

2013-10-14 04:01:28 Infinity

Oh, dolce! Non risolve il mio problema principale, ma grazie! Cambierò quello e classificherò le classi da quel momento in poi. – jgrant

Aggiunto un jsfiddle funzionante in modo da poter giocare con esso. – Infinity

Grazie! jsfiddle e tu sei fantastico! – jgrant

Forse meglio document.querySelectorAll(".col1") perché getElementsByClassName non lo fa lavori in IE 8 e querySelectorAll ha (solo selettori ma decorate CSS2).

https://developer.mozilla.org/en-US/docs/Web/API/document.getElementsByClassName https://developer.mozilla.org/en-US/docs/Web/API/Document.querySelectorAll

fonte

2013-10-14 04:16:29

Nizza. Grazie. Ha lavorato per me

Non sei sicuro del motivo per cui hai caricato jQuery. Non è usato Alcuni di noi usano ancora modem dial-up e satellite con limiti di larghezza di banda. Meno è più migliore.

<script> 
     function showAnswers(){ 
      var cols = document.getElementsByClassName('Answer'); 
      for(i=0; i<cols.length; i++) { 
      cols[i].style.backgroundColor = 'lime'; 
      cols[i].style.width = '50%'; 
      cols[i].style.borderRadius = '6px';   
      cols[i].style.padding = '10px'; 
      cols[i].style.border = '1px green solid'; 
      } 
     } 
     function hideAnswers(){ 
      var cols = document.getElementsByClassName('Answer'); 
      for(i=0; i<cols.length; i++) { 
      cols[i].style.backgroundColor = 'transparent'; 
      cols[i].style.width = 'inheret'; 
      cols[i].style.borderRadius = '0'; 
      cols[i].style.padding = '0'; 
      cols[i].style.border = 'none';   
      } 
     } 
    </script>

fonte

2014-06-27 02:12:30

Ottenere o modificare la proprietà della classe CSS con Javascript utilizzando lo stile DOM

risposta

Problemi correlati