style.backgroundColor es una cadena vacía en JavaScript

Question

Tengo el siguiente código a continuación que estoy tratando de establecer un color de fondo. Sin embargo, el color de fondo vuelve como una cadena vacía. No estoy seguro de por qué ... ¿Tiene algo que ver con los tipos de 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) 
} 

Así como una comprobación de validez, si uso la propiedad 'valor', imprime el valor correcto para ese campo en particular ... así que estoy un poco frustrado por qué la backgroundColor es una cuerda vacía.

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

Answer 1

A menos que haya definido directamente la backgroundColor en el elemento en sí, usted tiene que utilizar getComputedStyle() o currentStyle para obtener el valor de una propiedad de estilo.

Un método que es compatible con varios navegadores se vería así:

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

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

se puede ver un ejemplo de trabajo en jsFiddle.

Más información:

• Ver this page para obtener más información sobre getComputedStyle().
• Consulte this page para obtener más información acerca de currentStyle (IE).
• Consulte this page para obtener más información sobre problemas de compatibilidad del navegador.