style.backgroundColor è una stringa vuota in JavaScript

Question

Ho il seguente codice qui sotto che sto cercando di impostare un colore di sfondo. Tuttavia, il colore di sfondo viene restituito come una stringa vuota. Non sono sicuro del perché ... Ha qualcosa a che fare con i tipi javascript?

function function1(){ 
var color = document.getElementById('rg_vw.national_avg').style.backgroundColor; 
//this below appears as an empty alert at runtime. it's an empty string. 
alert(color) 
} 

Proprio come un controllo di integrità, se uso la proprietà 'valore', esso stampa il valore corretto per quel particolare settore ... quindi io sono solo un po 'frustrato per spiegare perché il backgroundColor è un stringa vuota.

//this works just fine 
var value = document.getElementById('rg_vw.national_avg').value 
alert(value) 

Answer 1

meno che non sia direttamente definito il backgroundColor sull'elemento stesso, è necessario utilizzare getComputedStyle() o currentStyle per ottenere il valore di una proprietà di stile.

Un metodo che è compatibile con più browser sarebbe simile a questa:

function getStyle(el,styleProp) 
{ 
    if (el.currentStyle) 
     return el.currentStyle[styleProp]; 

    return document.defaultView.getComputedStyle(el,null)[styleProp]; 
} 

Si può vedere un esempio funzionante su jsFiddle.

Maggiori informazioni:

• Vedi this page per ulteriori informazioni su getComputedStyle().
• Vedere this page per ulteriori informazioni su currentStyle (IE).
• Vedere this page per ulteriori informazioni sui problemi di compatibilità del browser.