I'm currently making a google chrome extension and am using this javascript to change dynamically the background color of the hovered element:

var bindEvent = function(elem ,evt,cb) {
    //see if the addEventListener function exists on the element
    if ( elem.addEventListener ) {
        elem.addEventListener(evt,cb,false);
    //if addEventListener is not present, see if this is an IE browser
    } else if ( elem.attachEvent ) {
        //prefix the event type with "on"
        elem.attachEvent('on' + evt, function(){
            /* use call to simulate addEventListener
             * This will make sure the callback gets the element for "this"
             * and will ensure the function's first argument is the event object
             */
             cb.call(event.srcElement,event);
        });
    }
};


bindEvent(document,'mouseover', function(event) 
{ var target = event.target || event.srcElement;
    /* getting target.style.background and inversing it */
});

bindEvent(document,'mouseout', function(event) 
{ var target = event.target || event.srcElement;
    /* getting target.style.background and inversing it */
});

and when used with static values, like target.style.background = #FFFFFF; when the cursor hover an element and target.style.background = #00000; when the cursor leave the element, it works perfectly. However, when I try to get the value of target.style.background or even target.style.backgroundColor, I always get rgb(255,255,255), no matter what the background color of the element is.

I know how to convert rgb to hexa and how to inverse it, but if I can't get the initial value of the background, it's useless.

So, my question is: why do var foo = target.style.backgroundColor; always return rgb(255, 255, 255) and how do I get the correct value?

Additional notes: the extension will be ported to other browsers later, so a cross-browser solution would be nice if it is possible.

I'm currently making a google chrome extension and am using this javascript to change dynamically the background color of the hovered element:

var bindEvent = function(elem ,evt,cb) {
    //see if the addEventListener function exists on the element
    if ( elem.addEventListener ) {
        elem.addEventListener(evt,cb,false);
    //if addEventListener is not present, see if this is an IE browser
    } else if ( elem.attachEvent ) {
        //prefix the event type with "on"
        elem.attachEvent('on' + evt, function(){
            /* use call to simulate addEventListener
             * This will make sure the callback gets the element for "this"
             * and will ensure the function's first argument is the event object
             */
             cb.call(event.srcElement,event);
        });
    }
};


bindEvent(document,'mouseover', function(event) 
{ var target = event.target || event.srcElement;
    /* getting target.style.background and inversing it */
});

bindEvent(document,'mouseout', function(event) 
{ var target = event.target || event.srcElement;
    /* getting target.style.background and inversing it */
});

and when used with static values, like target.style.background = #FFFFFF; when the cursor hover an element and target.style.background = #00000; when the cursor leave the element, it works perfectly. However, when I try to get the value of target.style.background or even target.style.backgroundColor, I always get rgb(255,255,255), no matter what the background color of the element is.

I know how to convert rgb to hexa and how to inverse it, but if I can't get the initial value of the background, it's useless.

So, my question is: why do var foo = target.style.backgroundColor; always return rgb(255, 255, 255) and how do I get the correct value?

Additional notes: the extension will be ported to other browsers later, so a cross-browser solution would be nice if it is possible.

• javascript
• google-chrome
• dom
• google-chrome-extension

3 Answers 3

In my experience, target.style is only populated with inline styling. To get style including css definitions just use the getComputedStyle method. For example

//instead of this
target.style.backgroundColor

//try this
getComputedStyle(target).backgroundColor

*Note that using the getComputedStyle method returns a read-only object, and target.style should still be used to set the background color.

You can't use .style to get settings that haven't been defined using .style or style="". Most browsers implement other ways for getting at current style calculations, these are a minefield of oddities however.

Internet explorer has .currentStyle, whereas the rest tend to implement .getComputedStyle. It would be a good idea to read up on these two subjects, to see their implementation — however, as I have said retrieving style settings is a much more plicated process than it first seems.

Even jQuery's css method only returns settings that have been specifically determined on that element i.e. no inheritance.

The following could be of use however:

http://upshots/javascript/jquery-get-currentstyleputedstyle

The only reliable way I know of is to associate a CSS class or ID with a colour, then extract that from an anchor in a hidden element, or simply from empty anchor tag with the class applied. Otherwise it really is about knowing what that colour is and having it already stored as a value somewhere. My HTML would be the following for this solution:

<style>
a:hover,
a#yourChosenIdName {
background-color:#00FF00;
}
</style>

<a href="#" id="yourChosenIdName"><!-- --></a>

<script>
var el = document.getElementById('yourChosenIdName'),
    getStyle = el.currentStyle ? el.currentStyle : getComputedStyle(el),
    hoverBackgroundColor = getStyle.backgroundColor;
//do something with background-color
</script>