Inherited CSS Values via Javascript

Question

On my page I am changing some css styles via javascript. When I try and pull a value that has been inherited - it comes up blank. Consider the following:

Answer 1

You'll want to use getComputedStyle.

The .style property is a means of accessing and setting inline style (i.e. like the style attribute).

Note, however, that your example has nothing to do with inheritance. Just rule-sets that apply directly to the elements you are interested in. Inheritance is when an element takes on the same style as its parent via the inherit keyword.

span {
    color: inherit;
}

getComputedStyle will give the final computed value though, so it will pick up inherited values too.