How Do I Get The Element's Background Color In Javascript?

I needed to get the background color of an element that was previously defined by a stylesheet in order to determine the style for the new element that will be created dynamically

Solution 1:

Try this:

function getStyle(element, property) {
    if (element.currentStyle)
        return this.currentStyle[property];
    else if (getComputedStyle)
        return getComputedStyle(element, null)[property];
    else
        return element.style[property];
}

Put this code at the beginning of your script file, and access it this way

function getColor(color){
    var box = document.getElementById("mybox");
    alert(getStyle(box, 'backgroundColor'));
}

EDIT: "compressed" version

function getStyle(element, property) {
    return getComputedStyle ? getComputedStyle(element, null)[property] : 
    element.currentStyle ? element.currentStyle[property] : element.style[property];
}