How to get the background color of an HTML element?

Javascript Problem Overview

How can I get the background color of any element, like a div, using JavaScript? I have 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) {
      console.log('myDivObj.bgColor: ' + myDivObj.bgColor); // shows: undefined
      console.log('myDivObj.backgroundcolor: ' + myDivObj.backgroundcolor); // shows: undefined
      //alert ( 'myDivObj.background-color: ' + myDivObj.background-color ); // this is not a valid property :)
      console.log('style:bgColor: ' + getStyle(myDivObj, 'bgColor')); //shows: undefined
      console.log('style:backgroundcolor: ' + getStyle(myDivObj, 'backgroundcolor')); // shows:undefined:
      console.log('style:background-color: ' + getStyle(myDivObj, 'background-color')); // shows: undefined
    } else {
      console.log('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>

Javascript Solutions

Solution 1 - Javascript

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

Solution 2 - Javascript

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

Solution 3 - Javascript

Simple solution

myDivObj = document.getElementById("myDivID")
let myDivObjBgColor = window.getComputedStyle(myDivObj).backgroundColor;

Now the background color is stored in the new variable.

https://jsfiddle.net/7q1dpeo9/1/

Solution 4 - Javascript

With jQuery:

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

With prototype:

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

With pure JS:

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

Solution 5 - Javascript

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;

Solution 6 - Javascript

This worked for me:

var backgroundColor = window.getComputedStyle ? window.getComputedStyle(myDiv, null).getPropertyValue("background-color") : myDiv.style.backgroundColor;

And, even better:

var getStyle = function(element, property) {
    return window.getComputedStyle ? window.getComputedStyle(element, null).getPropertyValue(property) : element.style[property.replace(/-([a-z])/g, function (g) { return g[1].toUpperCase(); })];
};
var backgroundColor = getStyle(myDiv, "background-color");

Solution 7 - Javascript

Using JQuery:

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

Solution 8 - Javascript

I came up with this function to find the first element that has a background color. It ignores all transparent elements.

export function findBackgroundColor(element: HTMLElement): string | undefined {
  const transparent = 'rgba(0, 0, 0, 0)'
  const color = window.getComputedStyle(element).backgroundColor
  if (color !== transparent) return color

  let parent = element.parentElement
  while (parent) {
    const parentColor = window.getComputedStyle(parent).backgroundColor
    if (parentColor !== transparent) return parentColor
    parent = parent.parentElement
  }

  return undefined
}

Content Type	Original Author	Original Content on Stackoverflow
Question	Rakesh Juyal	View Question on Stackoverflow
Solution 1 - Javascript	phnghue	View Answer on Stackoverflow
Solution 2 - Javascript	David Hedlund	View Answer on Stackoverflow
Solution 3 - Javascript	Husky931	View Answer on Stackoverflow
Solution 4 - Javascript	user228807	View Answer on Stackoverflow
Solution 5 - Javascript	nemisj	View Answer on Stackoverflow
Solution 6 - Javascript	Rehmat	View Answer on Stackoverflow
Solution 7 - Javascript	Aziz	View Answer on Stackoverflow
Solution 8 - Javascript	Tobi	View Answer on Stackoverflow