7

This was a surprise. The following code does not seem to give me the actual colors on the screen:

h1 = document.querySelector("h1");
window.getComputedStyle(h1).color

Gives rgb(0, 0, 0) which I think is correct. However

window.getComputedStyle(h1).backgroundColor

gives rgba(0, 0, 0, 0). The actual background color I see on the screen is white.

The element I call h1 is visible on the screen. I was expecting to get the actual background color. The value I get above (in rgba) is not wrong, but not very useful either. It just tells me the background is fully transparent - and that is not a color.

How do I get the actual background color in RGB?

Bergi
  • 630,263
  • 148
  • 957
  • 1,375
Leo
  • 4,136
  • 6
  • 48
  • 72
  • 1
    Try to use dom traversal, if current element's bg is transparent then check parent and so on. – Tony Apr 05 '14 at 03:52
  • Thanks @Tony, but getComputedStyle should give me exactly that. – Leo Apr 05 '14 at 04:08
  • 1
    @Leo: Why do you think it should? – Bergi Apr 05 '14 at 08:59
  • A very good question, @Bergi. I realize now that `background-color` is a bit different from other values since it depends on so many other things than `background-color` of parent elements. Testing on another element, a ``, I get this `rgba(0,0,0,0)` again even though the actual background is yellow. There is no `position`, `float` etc involved. The element is positioned within the box of the containing element that has the CSS yellow background. I can see the reason for the decision of returning `rgba(0,0,0,0)` however. – Leo Apr 05 '14 at 13:42
  • But @Bergi, it still prevents me from what I wanted to do. I wanted to get the contrast between the foreground and the background colors so that I could test for this part of accessibility. As things looks now I think this is impossible in javascript. – Leo Apr 05 '14 at 13:44
  • Maybe check [How do I detect the inherited background-color of an element using jQuery/JS?](http://stackoverflow.com/q/4259815/1048572) – Bergi Apr 05 '14 at 14:15
  • possible duplicate of [How to get element color which has no background?](http://stackoverflow.com/questions/17022226/how-to-get-element-color-which-has-no-background) (no solution, but very good explanation. Also consider background images or gradients :-). – Bergi Apr 05 '14 at 14:15
  • For accessibility testing, you could use an external tool (or browser addon?), or [take a screenshot](http://stackoverflow.com/q/4912092/1048572) and analyze that – Bergi Apr 05 '14 at 14:18
  • Thanks for the link, @Bergi. You can however actually do much better than that and it would be good if there was javascript/DOM support for it. I am just as surprised as BigDave in the question you linked too. The alternative you mention is a hard way if you want to automate this. – Leo Apr 05 '14 at 14:23
  • But as you see in [Athari's answer](http://stackoverflow.com/a/17022428/1048572), a dom element might not have a single color, so there's no native function implemented for this (transparent is the correct value). The traversal already mentioned by Tony is probably the simplest way. – Bergi Apr 05 '14 at 14:32
  • Yes, there could of course be several background colors, images and transient colors. But you can at least catch those cases - i.e. under certain layout assumptions (for example the viewport dimension+scrolling). – Leo Apr 05 '14 at 14:38
  • To be more clear: It is a rather simple thing to implement if you are in the position of developing the Chrome Workspace for example. – Leo Apr 05 '14 at 14:46

2 Answers2

7

If you set your background-color: rgba(255, 255, 255, 0) in your css; getComputedStyle() will return transparent (in some browsers) instead of your rgba value.

Easy fix for this is setting alpha to something higher than 0 for example rgba(255, 255, 255, 0.01); This will return rgba(255, 255, 255, 0.01)

sheilak
  • 5,833
  • 7
  • 34
  • 43
Stijn Heylen
  • 183
  • 4
  • 21
1

getComputedStyle(h1) provides the css value of element after applied in active stylesheet.

Which means you can get those css value only which applied to particular element in any way.

Eg:- if you applied background for h1 :RGB{255, 255, 255}, then you will get the background color white in rgb format otherwise not. It does not provide value for html's default style.

To get the value by getComputedStyle(), First you should apply this to element.

For more info getComputedStyle()

Suman Bogati
  • 6,289
  • 1
  • 23
  • 34
  • Hm, thanks, yes, that was what I saw, of course, but how do I get the html default style color values? – Leo Apr 05 '14 at 04:06