Getting the real background color of an element?

Question

Currently, I want to get the background color of the real specified object, here real means that people see, for example, the following code:

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

The real background color of the span # line should be rbg(255,0,0) .

So far I am doing it like. But I think that my decision is somewhat stupid, or maybe there are flaws in it. So I wonder if there is a better way to do this?

Thanks in advance:)

Answer 1

Try

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

This approach is simple and native. But IE8- do not support. See https://developer.mozilla.org/en/docs/DOM/window.getComputedStyle

Answer 2

Try the following:

 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 3

Pure version of 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/

Please note that it does not account for opacity or background images.

Answer 4

This is difficult to do correctly :( and I believe that a 100% correct result in all cases is impossible.

background-color is not inherited. getComputedStyle returns only what is in the .style.backgroundColor element, if any, or otherwise, what comes from the loaded CSS styles. If these two values ​​do not yet return a value, it returns rgba(0, 0, 0, 0) , in which case you need to climb into the DOM to find out what elements they have. And this is even more complicated in the case of frames that can get their background from the (i.e., top) frame behind them.

Here is an attempt:

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

(The problems with this is that if someone explicitly set the background of the element to rgba(0, 0, 0, 0) in the style of the element or in the CSS stylesheet, you may want this value instead of a computed value that will not work with this code.)

Answer 5

Try the following:

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