javascript - 有没有办法引用子节点并获得继承的背景颜色？

Question

我在 jsFiddle 中做了一些初步测试，如下所示: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>

这表明在运行时，它实际上并没有将继承的颜色传递给 child 。

我很好奇如何获取没有背景色的 sub-dim 的 background color，例如:current background-color 或最近的。

我的最终目标是:迭代 sub-dim 以返回 [red, cyan,teal] 或颜色代码。根据我给你的元素，div 是透明的，父级的颜色是透过的。

Answer 1

如果颜色是透明的，您可以将其设置为inherit 并获取新的计算颜色。

// 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>