style.backgroundColor ist eine leere Zeichenfolge in JavaScript

Question

Ich habe den folgenden Code unten, dass ich versuche, eine Hintergrundfarbe festzulegen. Die Hintergrundfarbe wird jedoch als leere Zeichenfolge zurückgegeben. Ich bin mir nicht sicher warum ... Hat es etwas mit Javascript-Typen zu tun?

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) 
} 

So wie eine Plausibilitätsprüfung, wenn ich den ‚Wert‘ Eigenschaft verwenden, druckt er den richtigen Wert für das jeweilige Feld aus ... so bin ich nur ein bisschen frustriert, warum die Backgroundcolor ist ein leerer String.

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

Answer 1

Es sei denn, Sie haben direkt auf die Backgroundcolor auf das Element selbst definiert sind, haben Sie getComputedStyle() oder currentStyle verwenden, um den Wert einer Stileigenschaft zu erhalten.

Ein Verfahren, das mit mehreren Browsern kompatibel ist, würde so aussehen:

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

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

Sie ein funktionierendes Beispiel auf jsFiddle sehen können.

Weitere Informationen:

• Siehe this page für weitere Informationen über getComputedStyle().
• Weitere Informationen zu currentStyle (IE) finden Sie unter this page.
• Weitere Informationen zu Browserkompatibilitätsproblemen finden Sie unter this page.