is there a way to reference a child node and get say an inherited background color?

Question

I was doing some initial testing in jsFiddle as follows: https://jsfiddle.net/6pqxfy2o/

$(function(){
 console.log("fired");
  $("div").each(function(){
   console.log($(this).attr("class"));
    console.log($(this).css("background-color"))})
})

.color{
  background-color:teal;
}

.dim{
  width: 200px;
  height: 200px;
}

.sub-dim{
  width: 50px;
  height:50px;
  border: solid 1px white;
}
.ping {
  background-color: cyan;
}

.ack {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dim color">
  <div class="sub-dim ack">
  
  </div>
  <div class="sub-dim ping">
  
  </div>
  <div class="sub-dim">
  
  </div>
</div>

This was showing that when running, it did not actually pass the inherited color into the child.

I am curious though how I can get the background color of the sub-dim which has no background color, such as: current background-color or nearest.

My end goal would be to say: When iterating over sub-dim to return [red, cyan,teal] or color codes. Based on the item I gave you, the div is transparent and the parent's color is showing through.

Maybe this would help. http://stackoverflow.com/questions/9729864/how-can-i-get-the-inherited-css-value-using-javascript — dokgu, Dec 20 '16 at 15:53
Your question is incoherent: `sub-dim` **IS** transparent, so there is **NO** background-color. If you want the color of the element behind shining through, you could not compute it, since you can have anything behind. If you want the background-color of the parent, you can do it. — Lorenz Meyer, Dec 20 '16 at 15:58
I am sorry, but I don't see the problem. You have the background color for
. It is rgba(0, 0, 0, 0). What do you mean by: "it did not actually pass the inherited color into the child"? — xszaboj, Dec 20 '16 at 16:00
my end goal was to get the color shining through i guess. yeam i realized there is no background color, but i was not sure the best approach to get the color which is under neath. I was thinking to do it programatically, but i was not sure if there was a css property or something i could leverage — Fallenreaper, Dec 20 '16 at 16:03

Oriol · Accepted Answer · 2016-12-20T16:30:16.470

If the color is transparent, you can just set it to inherit and get the new computed color.

// Some browsers say "transparent" and some "rgba(0, 0, 0, 0)"
var transparent = (function() {
  var backup = document.body.style.backgroundColor;
  document.body.style.backgroundColor = 'transparent';
  var bg = getComputedStyle(document.body).backgroundColor;
  document.body.style.backgroundColor = backup;
  return bg;
})();
[].forEach.call(document.getElementsByTagName("div"), function(el) {
  var bg = getComputedStyle(el).backgroundColor;
  if (bg === transparent) {
    var backup = el.style.backgroundColor;
    el.style.backgroundColor = 'inherit';
    bg = getComputedStyle(el).backgroundColor;
    el.style.backgroundColor = backup;
  }
  console.log(el.className, ":", bg);
});

.color {
  background-color: teal;
}
.dim {
  width: 200px;
  height: 200px;
}
.sub-dim {
  width: 50px;
  height: 50px;
  border: solid 1px white;
}
.ping {
  background-color: cyan;
}
.ack {
  background-color: red;
}

<div class="dim color">
  <div class="sub-dim ack"></div>
  <div class="sub-dim ping"></div>
  <div class="sub-dim"></div>
</div>

perfect answer. Thank you. :) I was curious maybe this is a different question, but are you able to inherit classes as well? — Fallenreaper, Dec 20 '16 at 16:15
Will probably need to add in a check against `rgba(0, 0, 0, 0)` too as `backgroundColor` will hold the rgb/a value and not the `"transparent"` value on some browsers — Patrick Evans, Dec 20 '16 at 16:16
@PatrickEvans Yes, the difference in computed colors is so annoying — Oriol, Dec 20 '16 at 16:20

score 0 · Answer 2 · answered Dec 20 '16 at 16:05

I'm not sure I completely understand the problem, but you could try

.sub-dim.ack {
  background-color: red;
}

or

.ack, .ack * {
  background-color: red;
}

Obviosly try to be ore specific with which child elements you'd like to target.

This would likely be a lot easier in SASS.

is there a way to reference a child node and get say an inherited background color?

2 Answers2