Javascript 获取元素的真实背景色？

目前我想获得指定对象的真实背景色，这里，真实表示人们看到的，例如，给定以下代码：

我是红色的
我没有背景，但我是红色的

#bar

的真实背景色应为

rbg（255,0,0）

以下是我目前掌握的情况：

函数颜色可见（颜色）{
返回color_str&！（color_str.substr（0,4）=“rgba”&&color_str.substr（-2,2）=“0”）；
}
函数get_bgcolor（obj）{
var ret=$（obj）.css（“背景色”）；
如果（！color_visible（ret））ret=$（obj.css（“bgcolor”）；
如果（颜色可见（ret））返回ret；
if（！$（obj.is（“body”））返回get_bgcolor（$（obj.parent（））；
返回“rgb（255、255、255）”；
}

但是有没有更好的方法呢

堆栈中的演示代码段和

函数颜色可见（颜色）{
返回color_str&！（color_str.substr（0,4）=“rgba”&&color_str.substr（-2,2）=“0”）；
}
函数get_bgcolor（obj）{
var ret=$（obj）.css（“背景色”）；
如果（！color_visible（ret））ret=$（obj.css（“bgcolor”）；
如果（颜色可见（ret））返回ret；
if（！$（obj.is（“body”））返回get_bgcolor（$（obj.parent（））；
返回“rgb（255、255、255）”；
}
log（get#bgcolor（$（“#bar”））；
log（get#bgcolor（$（“#baz”））；
log（get#bgcolor（$（“#foo”））；
log（get_bgcolor（$（“body”））
正文{
背景颜色：黄色；
}
.bg_white{
背景色：#FFF；
}

我是红色的
我没有背景
我是白人
我是黄色的
试试这个：

var get_bgcolor = function(obj) {
    var real = obj.css('background-color');
    var none = 'rgba(0, 0, 0, 0)';
    if (real === none) {
        return obj.parents().filter(function() {
            return $(this).css('background-color') != none
        }).first().css('background-color');
    } else {
        return real
    }
}

function hexc(colorval) {
    var parts = colorval.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
    delete(parts[0]);
    for (var i = 1; i <= 3; ++i) {
        parts[i] = parseInt(parts[i]).toString(16);
        if (parts[i].length == 1) parts[i] = '0' + parts[i];
    }
    color = '#' + parts.join('');
}

var color = '';
$('div#foo').click(function() {
    var x = $(this).css('backgroundColor');
    hexc(x);
    alert(color);
})

试试这个：

var get_bgcolor = function(obj) {
    var real = obj.css('background-color');
    var none = 'rgba(0, 0, 0, 0)';
    if (real === none) {
        return obj.parents().filter(function() {
            return $(this).css('background-color') != none
        }).first().css('background-color');
    } else {
        return real
    }
}

function hexc(colorval) {
    var parts = colorval.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
    delete(parts[0]);
    for (var i = 1; i <= 3; ++i) {
        parts[i] = parseInt(parts[i]).toString(16);
        if (parts[i].length == 1) parts[i] = '0' + parts[i];
    }
    color = '#' + parts.join('');
}

var color = '';
$('div#foo').click(function() {
    var x = $(this).css('backgroundColor');
    hexc(x);
    alert(color);
})

函数hexc（colorval）{
var parts=colorval.match（/^rgb\（\d+）\s*（\d+）\s*（\d+）$/）；
删除（第[0]部分）；
对于（var i=1；i尝试：

window.getComputedStyle（元素，null）.getPropertyValue（“背景色”）

此方法简单且原生，但纯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'));


请注意，它不考虑不透明度或背景图像。
这是一件很难正确处理的事情：（我相信在所有情况下都不可能得到100%正确的结果

背景色不是继承的。getComputedStyle仅返回elem.style.backgroundColor（如果有）中的内容，或者从加载的css样式表派生的内容。如果这两个仍然不返回值，则返回
rgba（0，0，0，0）
在这种情况下，您需要爬上DOM来查看父元素有哪些。对于可能从其后面的（即顶部）帧派生其背景的帧，这一点更加复杂

以下是一个尝试：

const getCbgcolor = (elem) => {
  if (!getCbgcolor.top) getCbgcolor.top= (() => { 
    try { return window.top.document.documentElement; } catch(e) { return null; /* CORS */}})()
  });

  while (true) {
    let cbg=window.getComputedStyle(elem).getPropertyValue('background-color');
    if (cbg && cbg!='rgba(0, 0, 0, 0)' && cbg!='transparent') return cbg;
    if (elem===getCbgcolor.top) return 'initial';
    elem = elem.parentElement;
    if (!elem) return '';
  }
}

（这样做的一个问题是，如果有人在元素的样式或css样式表中将元素的背景显式设置为
rgba（0，0，0）
，您可能需要该值，而不是不适用于此代码的计算值。）
您不会得到$（“#bar”）的
红色
.@Marcus#bar没有背景色属性。所以您想获取#bar父级的背景色？是的，人们看到的背景色，正如我在问题中提到的：）但是如果没有背景，它将返回未定义的
，
认为您的示例非常接近于遍历父对象，直到找到颜色为止。@TimMedora，但是如果#bar的位置不在#foo的顶部呢？我的意思是
#bar{位置：…；左：…，上：}
。这是一个很好的问题。你可以检查页面上元素的尺寸/位置以确定交叉点，但我认为这会变得很慢，除非页面上只有几十个元素，或者你可以找到一种方法将其限制在一个小区域内。@TimMedora，是的，浏览器实际上就是这样做的……我认为这是正确的问题帮助您不总是工作得很好在我最简单的Chrome示例中，它总是返回
rgba（0,0,0,0）
。遍历元素树时工作得很好（见下文）如果父级有“代码>背景图像 SET，则此方法失败，请参阅：添加此检查：如果返回父级<代码>背景图像< /代码>，则返回<代码>未定义< /代码>作为背景。