javascript - 获取元素的真实背景颜色？

Question

目前我想获取指定对象的real背景颜色，这里的real是指人们看到的，例如给定如下代码:

<div id="foo" style="background-color: red">
    I am red
    <span id="bar">
         I have no background, but I am red
    </span>
</div>

#bar 的真实背景颜色应该是 rbg(255,0,0)。

这是我目前所拥有的:

function color_visible(color_str) {
  return color_str && !(color_str.substr(0, 4) == "rgba" && color_str.substr(-2, 2) == "0)");
}

function get_bgcolor (obj) {
  var ret = $(obj).css("background-color");
  if (!color_visible(ret)) ret = $(obj).css("bgcolor");
  if (color_visible(ret)) return ret;
  if (!$(obj).is("body")) return get_bgcolor($(obj).parent());
  return "rgb(255, 255, 255)";
}

但是有更好的方法吗？

Stack Snippet 和 jsFiddle 中的演示

function color_visible(color_str) {
  return color_str && !(color_str.substr(0, 4) == "rgba" && color_str.substr(-2, 2) == "0)");
}

function get_bgcolor (obj) {
  var ret = $(obj).css("background-color");
  if (!color_visible(ret)) ret = $(obj).css("bgcolor");
  if (color_visible(ret)) return ret;
  if (!$(obj).is("body")) return get_bgcolor($(obj).parent());
  return "rgb(255, 255, 255)";
}

console.log(get_bgcolor($("#bar")));
console.log(get_bgcolor($("#baz")));
console.log(get_bgcolor($("#foo")));
console.log(get_bgcolor($("body")));

body {
  background-color: yellow;
}

.bg_white {
  background-color: #FFF;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <div id="foo" style="background-color: red">
    I am red
    <span id="bar">
      I have no background
    </span>

    <span id="baz" class="bg_white">
      I am white
    </span>
  </div>
  I am yellow
</div>

Answer 1

仅限 Javascript 版本:

function realBackgroundColor(elem) {
    var transparent = 'rgba(0, 0, 0, 0)';
    var transparentIE11 = 'transparent';
    if (!elem) return transparent;

    var bg = getComputedStyle(elem).backgroundColor;
    if (bg === transparent || bg === transparentIE11) {
        return realBackgroundColor(elem.parentElement);
    } else {
        return bg;
    }
}
realBackgroundColor(document.querySelector('#element')); // rgb(255, 255, 255)

http://jsfiddle.net/qnLwsr7y/

请注意，它不考虑不透明度或背景图像。