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

时间:2012-09-25 04:10:31

标签: javascript jquery html css

目前,我希望获得指定对象的真实背景颜色,此处,真实表示人们看到的内容,例如,给定以下代码:

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

到目前为止,我正在做this。但我认为我的解决方案有点愚蠢,或者可能存在缺陷。所以我想知道是否有更好的方法来做到这一点?

提前致谢:)

5 个答案:

答案 0 :(得分:7)

试试这个:

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/

答案 1 :(得分:4)

尝试

window.getComputedStyle(element, null).getPropertyValue("background-color")

这种方法简单而且原生。但是IE8-不支持。见https://developer.mozilla.org/en/docs/DOM/window.getComputedStyle

答案 2 :(得分:4)

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

请注意,它不考虑部分透明度。

答案 3 :(得分:1)

这是一个很难做到的事情:(我相信在所有情况下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, 0),则可能需要该值而不是计算值,这将不适用于此代码。)

答案 4 :(得分:-1)

试试这个:

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