10

I have a html like this:

<html>
    <head>
        <link rel="stylesheet" type="text/css" media="all" href="style.css">
    </head>

    <body>
        <div id="test">Testing</div>

        <script>
            alert(document.getElementById('test').style.display);
        </script>
    </body>
</html>

The style.css:

div {
    display:none;
}

I expect the js would return "none", but it return an empty string instead. Is there any way to solve this problem?

Alan
  • 2,888
  • 7
  • 34
  • 36

3 Answers3

6

This would work for standards compliant browsers (not IE - currentStyle/runtimeStyle).

<body>
    <div id="test">Testing</div>

    <script type="text/javascript">
        window.onload = function() {
            alert(window.getComputedStyle(document.getElementById('test'),null).getPropertyValue('display'));
        }
    </script>
</body>

Jonathan
  • 5,953
  • 1
  • 26
  • 35
  • 2
    Load a 150kb library to do something that is a 1-liner in vanilla JS? Are you serious? – Amy B Apr 01 '10 at 04:15
  • Thanks. However, our page will be used on mobile and we need to minimize the size of the page. Therefore jquery is not recommended. Is there any other way which can achieve the same result? – Alan Apr 01 '10 at 04:16
  • Might be worth mentioning that in the question. Particular mobiles? Quite a few don't support JS at all. – Jonathan Apr 01 '10 at 04:22
  • @Coronatus Since when is jQuery 150kb? – alex Apr 01 '10 at 04:27
  • 2
    @Coronatus - that would be the development version, which of course you would not deploy to a production server. The production version is only 24kb. – Jonathan Apr 01 '10 at 04:33
  • @Alan, changed the sample in this answer, does it help you? – Jonathan Apr 01 '10 at 04:34
  • 1
    @Jonathan - but the minified version is effectively 155kb of code after parsing. You could minify any Java/C/PHP/Ruby file, but that won't make it any faster to parse and evaluate. – Amy B Apr 01 '10 at 04:52
  • @Coronatus It will make initial download quicker though. – alex Apr 01 '10 at 05:26
3

Since display is not set directly as a style property, you won't get that using the above code. You have to get the computed value.

You can refer this page, Get styles

To get the value

var displayValue = getStyle("test", "display");

function getStyle(el,styleProp)
{
    var x = document.getElementById(el);
    if (x.currentStyle)
        var y = x.currentStyle[styleProp];
    else if (window.getComputedStyle)
        var y = document.defaultView.getComputedStyle(x,null).getPropertyValue(styleProp);
    return y;
}
rahul
  • 184,426
  • 49
  • 232
  • 263
  • Thanks. But how could I get the computed value? – Alan Apr 01 '10 at 04:14
  • 2
    That function is really basic, it will have problems with CSS property names formed by two or more words (i.e. `font-size`, `background-color`, etc) and also the `getComputedStyle` method should be invoked from the `document.defaultView` object, since not all browsers have the `defaultView` members available on the Global object (`window`), and there are more inconsistencies, give a look to this implementation that I made: http://stackoverflow.com/questions/2531737/javascript-incapable-of-getting-elements-max-height-via-element-style-maxheight/2531934#2531934 – Christian C. Salvadó Apr 01 '10 at 05:36
0

The CSS won't be loaded yet. Wrap your JavaScript in an "on-ready" event.

<body onload="alert(document.getElementById('test').style.display);">

Does that work for you?

Amy B
  • 17,874
  • 12
  • 64
  • 83