获得元素的真实背景颜色？

Question

目前我想获得指定对象的真实背景颜色,这里,真实意味着人们看到的内容,例如,给出以下代码:

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

span #bar的真正背景颜色应该是rbg(255,0,0).

到目前为止,我做它喜欢这样.但我认为我的解决方案有点愚蠢,或者可能存在缺陷.所以我想知道是否有更好的方法呢？

提前致谢 :)

Answer 1

试试这个:

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

http://jsfiddle.net/bqkwN/

Answer 2

尝试

window.getComputedStyle

这种方法简单而本机.但是IE8-不支持.请参阅https://developer.mozilla.org/en/docs/DOM/window.getComputedStyle

Answer 3

纯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'));

http://jsfiddle.net/qnLwsr7y/

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