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
– cschear, Commented Jul 24, 2009 at 7:14

Taknok · Accepted Answer · 2021-05-23 04:22:34Z

14

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, 2021 at 4:22

Taknok

7671 gold badge7 silver badges17 bronze badges

answered Jul 23, 2009 at 6:34

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Philippe Leybaert Over a year ago

getComputedStyle() does not work in all popular browsers (without naming any)

Ivan Over a year ago

You can now safely use getComputedStyle caniuse.com/#feat=getcomputedstyle

WBT Over a year ago

Related: Why does getComputedStyle not return display:none for an element hidden by a parent?

Philippe Leybaert · Accepted Answer · 2009-07-23 06:45:39Z

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, 2009 at 6:45

answered Jul 23, 2009 at 6:36

Philippe Leybaert

172k33 gold badges213 silver badges224 bronze badges

2 Comments

Philippe Leybaert Over a year ago

Sure, but you can point him a million times toward computed style, but if the CSS is incorrect, it's a waste of time

Quentin Over a year ago

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.

rahul · Accepted Answer · 2009-07-23 06:51:13Z

1

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"));   
}

answered Jul 23, 2009 at 6:51

rahul

188k50 gold badges239 silver badges266 bronze badges

Comments

Fabien Ménager · Accepted Answer · 2009-07-23 06:34:04Z

0

You need to look at the computed style, see here

answered Jul 23, 2009 at 6:34

Fabien Ménager

140k3 gold badges45 silver badges61 bronze badges

1 Comment

Aurovrata Over a year ago

the link is broken/not responding. Consider including the code in your answer

Collectives™ on Stack Overflow

Inherited CSS Values via Javascript

4 Answers 4

3 Comments

2 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related