How to get actual CSS property value of an HTML el

Question

This question already has an answer here:

• How to get computed background color style inherited from parent element 2 answers

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.

Answer 1

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.

Answer 2

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.

Answer 3

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>

Answer 4

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.

Answer 5

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.