style.backgroundColor is an empty string in JavaScript

Question

I have the following code below that I'm trying to set a background color. However, the background color returns as an empty string. I'm not sure why...Does it have something to do with javascript types?

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

Just as a sanity check, if I use the 'value' property, it prints out the correct value for that particular field...so I'm just a bit frustrated as to why the backgroundColor is an empty string.

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

Java!=JavaScript Please read the helpful descriptions of tags before slapping them on questions! — Andrew Thompson
– Andrew Thompson, Commented May 11, 2012 at 17:53

Elian Ebbing · Accepted Answer · 2012-05-11 18:10:48Z

25

Unless you have directly defined the backgroundColor on the element itself, you have to use getComputedStyle() or currentStyle to get the value of a style property.

A method that is compatible with multiple browsers would look like this:

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

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

You can see a working example on jsFiddle.

More information:

See this page for more information about getComputedStyle().
See this page for more information about currentStyle (IE).
See this page for more information about browser compatibility issues.

edited May 11, 2012 at 18:10

answered May 11, 2012 at 17:50

Elian Ebbing

19.1k5 gold badges51 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Gabi L Over a year ago

You can use window.getComputedStyle directly. In the link you shared says: "In many code samples, getComputedStyle is used from the document.defaultView object. In nearly all cases, this is needless, as getComputedStyle exists on the window object as well. It's likely the defaultView pattern was a combination of folks not wanting to write a testing spec for window and making an API that was also usable in Java."

Hans Murangaza DRCongo · Accepted Answer · 2022-05-03 11:38:46Z

1

Very short

const style = document.getComputedStyle(document.querySelector('node_identifier'))

Then you can get the css property by this

style.width for width; style.background for background

answered May 3, 2022 at 11:38

Hans Murangaza DRCongo

8707 silver badges17 bronze badges

Collectives™ on Stack Overflow

style.backgroundColor is an empty string in JavaScript

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related