How to get computed background color style inherited from parent element

Profile picture for user4617883
user4617883

I have this HTML page:

<!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-js --> 
document.addEventListener("DOMContentLoaded", function (event) {
  var inner_div = document.getElementById("innerDiv");
  console.log(getComputedStyle(inner_div, null)["backgroundColor"]);
});
<!-- language: lang-css --> 
#outterDiv {
  background-color: papayawhip;
}
<!-- language: lang-html --> 
<div id="outterDiv">
  <div id="innerDiv">
    I am an inner div
  </div>
</div>
<!-- end snippet -->

I want to find out the computed background color of the inner div without having to look into parent(s) element's computed style. Is that possible?

Solution

Here's some vanilla js that will get the effective background color for a given element:

function getInheritedBackgroundColor(el) {
  // get default style for current browser
  var defaultStyle = getDefaultBackground() // typically "rgba(0, 0, 0, 0)"
  
  // get computed color for el
  var backgroundColor = window.getComputedStyle(el).backgroundColor
  
  // if we got a real value, return it
  if (backgroundColor != defaultStyle) return backgroundColor

  // if we've reached the top parent el without getting an explicit color, return default
  if (!el.parentElement) return defaultStyle
  
  // otherwise, recurse and try again on parent element
  return getInheritedBackgroundColor(el.parentElement)
}

function getDefaultBackground() {
  // have to add to the document in order to use getComputedStyle
  var div = document.createElement("div")
  document.head.appendChild(div)
  var bg = window.getComputedStyle(div).backgroundColor
  document.head.removeChild(div)
  return bg
}

Then you can call it like this:

var myEl = document.getElementById("a")
var bgColor = getInheritedBackgroundColor(myEl)

Demo in jsFiddle

Explanation

The solution works by checking the resolved value for a particular element. If the background is transparent, it'll start over again with the element's parent until it finds a defined color or reaches the top.

There are two main concepts to be familiar with:

  1. How background-color is set?
  2. How resolved values work?

According to MDN, background-color has an initial value of transparent and is not an inherited property. Meaning even if a parent div has a color applied, any unstyled child div will have a background-color of transparent. Most browsers, will convert this to an rgb color space so will return the value of rgba(0,0,0,0) with the alpha channel / transparency set to 0%.

This distinction may seem trivial, but it's important to understand that most divs on a page are probably transparent. They do not paint any colors, they just don't mask parent elements. If background values were inherited, colors with transparency would stack and get stronger on child elements

According to MDN, resolved values are what is returned by the browser from .getComputedStyle() which includes computed values and used values. Using the resolved value helps handle special values like inherit, initial, etc. and coverts any relative values to absolute values. Plus also provides a consistent API for getting styling info from attributes vs those applied via stylesheets.

So window.getComputedStyle() isn't used to determine the color that appears in the background; it's just there to get the actual value for the div. And then we'll traverse up the DOM tree until we find an actual value.

Further Reading