CODEWITHSUNDEEP
javascripthtmlproperties
dido
dido

Reputation: 3407

style.backgroundColor is an empty string in JavaScript

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)

Upvotes: 11

Views: 8468

Answers (2)

Hans Murangaza DRCongo
Hans Murangaza DRCongo

Reputation: 860

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

Upvotes: 1

Elian Ebbing
Elian Ebbing

Reputation: 19027

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.

Upvotes: 25

Related Questions