Home » Html » How to get the background color of an element using javascript?

How to get the background color of an element using javascript?

Posted by: admin November 29, 2017 Leave a comment

Questions:

How can i get the background color of any element, say Div, using javascript. I tried:-

<html>
    <body>
        <div id="myDivID" style="background-color: red">shit happens</div>
        <input type="button" value="click me" onclick="getColor();">
    </body>

    <script type="text/javascript">
        function getColor(){
            myDivObj = document.getElementById("myDivID")
            if ( myDivObj ){
                alert ( 'myDivObj.bgColor: ' + myDivObj.bgColor ); // shows: undefined
                alert ( 'myDivObj.backgroundcolor: ' + myDivObj.backgroundcolor ); // shows: undefined
                //alert ( 'myDivObj.background-color: ' + myDivObj.background-color ); // this is not a valid property :)
                alert ( 'style:bgColor: ' + getStyle ( myDivObj, 'bgColor' ) ); //shows: undefined
                alert ( 'style:backgroundcolor: ' +  getStyle ( myDivObj, 'backgroundcolor' ) ); // shows:undefined:
                alert ( 'style:background-color: ' +  getStyle ( myDivObj, 'background-color' ) );  // shows: undefined
            }else{
                alert ( 'damn' );
            }
        }
        /* copied from `QuirksMode`  - http://www.quirksmode.org/dom/getstyles.html - */
        function getStyle(x,styleProp)
        {
            if (x.currentStyle)
                var y = x.currentStyle[styleProp];
            else if (window.getComputedStyle)
                var y = document.defaultView.getComputedStyle(x,null).getPropertyValue(styleProp);
            return y;
        }
    </script>
</html>
Answers:

As with all css properties that contain hyphens, their corresponding names in JS is to remove the hyphen and make the following letter capital: backgroundColor

alert(myDiv.style.backgroundColor);

Questions:
Answers:

Get at number:

window.getComputedStyle( *Element* , null).getPropertyValue( *CSS* );

Example:

window.getComputedStyle( document.body ,null).getPropertyValue('background-color');  
window.getComputedStyle( document.body ,null).getPropertyValue('width');  
~ document.body.clientWidth

Questions:
Answers:

It depends which style from the div you need. Is this a background style which was defined in CSS or background style which was added through javascript(inline) to the current node?

In Case of CSS style, you should use computed style. Like you do in getStyle.

With inline style you should use node.style reference: x.style.backgroundColor;

Also notice, that you pick the style by using CamelCase/non hyphen reference, so not background-color, but backgroundColor;

Questions:
Answers:

With jQuery:

jQuery('#myDivID').css("background-color");

With prototype:

$('myDivID').getStyle('backgroundColor'); 

With pure JS:

document.getElementById("myDivID").style.backgroundColor

Questions:
Answers:

Using JQuery:

var color = $('#myDivID').css("background-color");

Questions:
Answers:

btw, checkout the following getelementsbyclassname function implementation usage comparisons: http://ejohn.org/blog/getelementsbyclassname-in-firefox-3/