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:

    .Sliding
    {
        display: none;
        overflow: hidden;
    }

    .Sliding #FilterBox
    {
        height: 185px;
        background-color: Fuchsia;
    }

And the html:

<div class="Sliding" id="FilterBox">
        <h3>Test Form</h3>
        This is a test/<br />
        12345
</div>

If I look at the element 'document.getElementById(objname).style.display' its blank? How can I read the display value via via javascript?

Thanks everyone. Using getComputedStyle helped resolve my issue. I'm taking it that getElementById().style is just used for individual style settings - not those set by a class or id. — cschear, Jul 24 '09 at 07:14

score 13 · Accepted Answer · edited May 23 '21 at 04:22

13

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.

edited May 23 '21 at 04:22

Taknok

717
7
16

answered Jul 23 '09 at 06:34

Quentin

914,110
126
1,211
1,335

3

getComputedStyle() does not work in all popular browsers (without naming any) – Philippe Leybaert Jul 23 '09 at 06:43
4

You can now safely use `getComputedStyle` http://caniuse.com/#feat=getcomputedstyle – Ivan Apr 07 '15 at 17:41
Related: [Why does getComputedStyle not return display:none for an element hidden by a parent?](https://stackoverflow.com/q/56692450/798371) – WBT Jun 20 '19 at 19:19

Philippe Leybaert · Answer 2 · 2009-07-23T06:45:39.910

2

Your second CSS rule:

.Sliding #FilterBox
{
    height: 185px;
    background-color: Fuchsia;
}

will match anything with id "FilterBox" that is a descendant of anything with a class "Sliding", so this rule does not apply to your div.

And to get the computed style, you can refer to Fabien's answer, or consider using jQuery, which makes this stuff a lot easier:

using jQuery, $("#FilterBox").css("display") would return the current value for "display".

edited Jul 23 '09 at 06:45

answered Jul 23 '09 at 06:36

Philippe Leybaert

168,566
31
210
223

Sure, but you can point him a million times toward computed style, but if the CSS is incorrect, it's a waste of time – Philippe Leybaert Jul 23 '09 at 06:39
Since the second rule doesn't touch the display property, it wouldn't have any impact if it was written to apply to that element. – Quentin Jul 23 '09 at 06:44

score 1 · Answer 3 · answered Jul 23 '09 at 06:51

if (!window.getComputedStyle) 
{
    window.getComputedStyle = function(el, pseudo) 
    {
        this.el = el;
        this.getPropertyValue = function(prop) {

        var re = /(\-([a-z]){1})/g;
        if (prop == 'float') 
            prop = 'styleFloat';
        if (re.test(prop)) 
        {
            prop = prop.replace(re, function () {

            return arguments[2].toUpperCase();
           });
        }

        return el.currentStyle[prop] ? el.currentStyle[prop] : null;
      }

      return this;
   }
}

function GetCompStyle()
{   
    var compStyle = window.getComputedStyle(document.getElementById('FilterBox'), "");
    alert(compStyle.getPropertyValue("display"));   
}

score 0 · Answer 4 · answered Jul 23 '09 at 06:34

0

You need to look at the computed style, see here

answered Jul 23 '09 at 06:34

Fabien Ménager

140,109
3
41
60

the link is broken/not responding. Consider including the code in your answer – Aurovrata Aug 31 '21 at 16:22

Inherited CSS Values via Javascript

4 Answers4

Linked