2013-01-04 16 views
5

il mio problema è come segue:Javascript DOM style.backgroundColor non funziona correttamente

Ho un pezzo di codice javascript che genera un "nuovo" documento utilizzando document.write e in un primo momento ho scrivere l'intera intestazione della pagina web . In quella testa ho un po 'di codice CSS che assomiglia a questo:

<style type='text/css'> 
.black {background-color: black;} 
.white {background-color: #ffffff;} 
td {width:50px; height:50px;} 
</style> 

e JavaScript disegna una tabella nella sezione corpo. Scrivere codice è fondamentalmente due loop for che disegnano una scacchiera. Ma non importa nemmeno. Ogni elemento td ottiene una classe black o white con la quale viene colorata correttamente. E ogni td ottiene un attributo onclick='changeBg(this)'.

Qui è dove il problema prende vita. Non riesco ad accedere al colore di sfondo dell'elemento su cui viene fatto clic. La funzione è così:

function changeBg(element) 
{ 
    alert(element.style.backgroundColor); 
    element.style.backgroundColor = "red"; 
} 

Inizialmente avviso il colore dell'elemento corrente. Avvisa sempre una notifica vuota. Dopo aver cambiato il colore in rosso e aver fatto nuovamente clic sull'elemento, viene visualizzato il messaggio red. Gli td sono colorati nel browser e se li controllo con firebug hanno lo background-color: black | white;

Cosa mi manca e come risolvere questo problema? Mi sono reso conto che se ho impostato il colore td durante la loro creazione utilizzando style="color: black | white"; Funziona ma poi non so a quale classe appartengono.

risposta

6

È possibile ottenere lo stile attualmente applicato usando window.getComputedStyle - Docs

function changeBg(element) { 
    alert(window.getComputedStyle(element).backgroundColor); 
    element.style.backgroundColor = "red"; 
} 
Problemi correlati