How to get the actual value of the CSS property of an HTML node element?

Question

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

I created this simple example with a paragraph containing 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>

Run codeHide result

The background color of the paragraph orange, so the span should also have this 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 range? Thank.

Answer 1

This gives you the correct result.

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

, a rgba - 0. , .

, .

Answer 2

EDIT: , JS, , :

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>

Hide result

style , :

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>

Hide result

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

Hide result

Answer 3

, , getComputedStyle , , .

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

Hide result

, getComputedStyle W3Schools, , :

- , , "" .

, , "" , , , .

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>

Hide result

... , , . , , .

Answer 5

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

rgb(0, 128, 0), span. .