6

As I understand the getComputedStyles() method, it should return an object that allows one to access the actual CSS property values of an HTML element node.

I created this simple example with a paragraph containing a span:

let span = document.getElementsByTagName("span")[0];
let style = window.getComputedStyle(span);
span.innerText = "span background-color is " + style.getPropertyValue("background-color");
<p style="background-color: orange">
  <span style="color: green">Empty</span>
</p>

The background color of the paragraph is orange, so the span should also have that property value, or am I mistaken? Could it be that inherited values are ignored in getComputedStyles? And if so, how can I get the actually visible background color for the span? Thank you.

Krisztián Balla
  • 15,886
  • 11
  • 58
  • 69
  • 1
    The `` itself doesn't have any background-color value, only the `

    ` does.

     – Zenoo Jan 09 '18 at 11:04
  • 1
    _“Could it be that inherited values are ignored in getComputedStyles?”_ - you are _not_ dealing with an inherited value here. https://developer.mozilla.org/en-US/docs/Web/CSS/background: _“Inherited: no”_ – CBroe Jan 09 '18 at 11:05
  • If you simply inspect said span, and look at the computed styles, you can see there is no background-color computed for it. – Jesse Jan 09 '18 at 11:06
  • So the background value is never inherited? So there is no other way then to inspect all parent elements' background value? – Krisztián Balla Jan 09 '18 at 11:08
  • `The background color of the paragraph is orange, so the span should also have that property value, or am I mistaken?` no it will not inherit automatically. you have to mentioned explicitly like `Empty` then you will get the desired result. https://jsfiddle.net/LsdLeogq/ – Suresh Ponnukalai Jan 09 '18 at 11:11
  • @SureshPonnukalai: Unfortunately I didn't find that question when researching this problem of mine. This really seems to be a duplicate and should be closed. Thank you all. – Krisztián Balla Jan 09 '18 at 11:33
  • _“So the background value is never inherited?”_ - no, it isn’t, because it is simply _specified_ that way. (And for a good reason; imagine you were to use `background: rgba(0,0,0,.5)` to get a background color with an opacity - those opacity values would _multiply_ for nested elements, and that most likely won’t give you the desired effect.) – CBroe Jan 09 '18 at 11:37
  • @CBroe: I see. So `getComputedStyle` is not the solution for this problem and there does not seem to be any "easy" way to get the actually visible value. – Krisztián Balla Jan 09 '18 at 11:40
  • _“The background color of the paragraph is orange, so the span should also have that property value, or am I mistaken?”_ - putting a sheet of colored, semi-transparent fabric outside of your window will change what you _see_ when you look through that window - but it does not “inherit” to the window itself, and change what color glas it is ... – CBroe Jan 09 '18 at 11:40

5 Answers5

4

It is giving you the correct result.

span background-color is rgba(0, 0, 0, 0)

Note that the a in rgba is 0. There is no opacity at all, the element is completely transparent.

It isn't orange, you can just see through it to the orange element behind it.

Quentin
  • 800,325
  • 104
  • 1,079
  • 1,205
  • Thank you. I would still need to know the actually visible background for the span. How you actually see it. Any idea how this could be done? Do I need to inspect all parent elements and look for their background value? – Krisztián Balla Jan 09 '18 at 11:11
  • you can get the parent element background color – Ranjan Jan 09 '18 at 11:17
  • 1
    @JennyO'Reilly — It's quite a hard problem. You could recursively search up the document tree until you find an ancestor with an explicit background-color, but that doesn't take into account background images or the fact that positioning or floats could make the element displayed behind an element one that isn't an ancestor if it at all. – Quentin Jan 09 '18 at 11:21
1

EDIT: Updated my answer to use pure JS to find the background color you are looking for:

let span = document.getElementsByTagName("span")[0];
let parent = document.getElementsByTagName("span")[0].parentElement;
let style = window.getComputedStyle(parent);
span.innerText = "span background-color is " + style.getPropertyValue("background-color");
<p style="background-color: orange">
  <span style="color: green">Empty</span>
</p>

Another potential option would be updating your style of the span to inherit the background color of the parent, in which case your initial attempt would work:

let span = document.getElementsByTagName("span")[0];
let style = window.getComputedStyle(span);
span.innerText = "span background-color is " + style.getPropertyValue("background-color");
<p style="background-color: orange">
  <span style="color: green; background-color: inherit">Empty</span>
</p>

And here is the old version using Jquery:

var color = $('#getThis').closest("p").css("background-color");
$('#getThis').html('Background color is ' + color);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p style="background-color: orange">
  <span id="getThis" style="color: green">Empty</span>
</p>
user3483203
  • 45,503
  • 8
  • 43
  • 75
0

I have wrote this simple snippet to be sure that getComputedStyle returns only the applied style for the element, and not what is actually rendered.

let style1 = window.getComputedStyle(document.getElementById('s1'));
let style2 = window.getComputedStyle(document.getElementById('s2'));

document.getElementById('i1').value = style1.getPropertyValue("background-color");
document.getElementById('i2').value = style2.getPropertyValue("background-color");
<div style='background-color: cyan'>
  <span id='s1'>Span without backgound</span>
</div>

<div style='background-color: cyan'>
  <span id='s2' style='background-color: yellow'>Span with backgound</span>
</div>

<input id='i1' type='text' />
<input id='i2' type='text' />

But, reading the defination of getComputedStyle from W3Schools, looks confusing, for me:

The computed style is the style actually used in displaying the element, after "stylings" from multiple sources have been applied.

Reading this, sounds like all "stylings" applied should be returned, and this is not what happens, just my opinion.

Ricardo Pontual
  • 3,629
  • 3
  • 26
  • 40
  • I didn't understand the down vote, could you elaborate please? – Ricardo Pontual Jan 09 '18 at 11:27
  • I didn't down vote, but the reason may be that this is not really an answer to the question, but rather a constructive comment. – Krisztián Balla Jan 09 '18 at 11:31
  • I got, but the snippet prove that only directly applied style over the element are returned from `getComputedStyle`, so I don't think it's a simple comment, but thank you for the feedback @JennyO'Reilly – Ricardo Pontual Jan 09 '18 at 11:59
0

let span = document.getElementsByTagName("span")[0];
getBackgroundColor(span);


function getBackgroundColor(ele){
  let style = window.getComputedStyle(ele);
  if(ele){
    if(ele.style.backgroundColor)
      span.innerText = "span background-color is " + style.getPropertyValue("background-color");
    else
      getBackgroundColor(ele.parentNode);
  }else
    span.innerText = "span background is transparent";
  return;
}
<p style="background-color: orange">
  <span style="color: green">Empty</span>
</p>

This is done using recursion...may be this is what you want. It will keep checking its parent background-color until it finds one otherwise it will return transparent.

Ranjan
  • 360
  • 2
  • 10
0

if you use this 

span.innerText = "span background-color is " + style.getPropertyValue("color");

then you will get the font color rgb(0, 128, 0) as you use in span. your syntax giving you correct answer.

Pushpendra Kumar
  • 1,483
  • 1
  • 13
  • 20