Javascript: document.getElementById("el").style.display returns empty string but is not?

Question

I am trying to write some basic javascript code which just checks if an element is block or none (display: block or display: none). It's my very first time falling on that issue as it works perfectly on one of my other websites. Here is my code:

function loading(){
    var loader = document.getElementById("loader");
    if (loader.style.display == "block"){
        var child = document.getElementById("loader-ul").childNodes;
        alert(child);
    }
    else{
        alert(loader.style.display);
    }
}

css (which is necessary):

#loader{
    display: block;
    position: fixed;
    height: 100%;
    width: 100%;
    background-color: white;
    z-index: 9999;
}

html (which is necessary):

<!DOCTYPE>
<html>
    <header>
        <title>myweb</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </header>
    <body onclick="loading()">
        <div id="loader">
            <div class="center">
                <ul id="loader-ul">
                    <li>
                    </li><li>
                    </li><li>
                    </li><li>
                    </li><li>
                    </li><li>
                    </li><li>
                    </li><li>
                    </li><li>
                    </li><li>
                    </li><li>
                    </li><li>
                    </li><li>
                    </li><li>
                    </li><li>
                    </li><li>
                    </li><li>
                    </li><li>
                    </li><li>
                    <li></li>
                </ul>
            </div>
        </div>
    </body>
    <script type="text/javascript" src="script.js"></script>
</html>

FACTS

I have experience with javascript (as this code is just to check if everything is working
I spent hours on looking on that simple bug and I have no idea how and why
Never had such a bug like this (if I had, it was because I didn't have the attribute in CSS or I haven't linked JavaScript to HTML correctly).

@Oriol The question that you marked as duplicate with the question you requested are not the same... — GeorGios, Sep 24 '16 at 18:52
You want to get `display` and that question wants to get `top`. I guess you can deduce from there, can't you? — Oriol, Sep 24 '16 at 18:54
Gaby's answer tells you to use `getComputedStyle`, and you say it works. Top answer in that other questions tells you to use `getComputedStyle`, and you say it doesn't work. I can't comprehend. — Oriol, Sep 24 '16 at 18:57

score 8 · Accepted Answer · answered Sep 24 '16 at 18:49

Well, the element.style will return the inline style attribute values

Use the window.getComputedStyle to see the rendered style.

function loading(){
    var loader = document.getElementById("loader"),
        display = window.getComputedStyle(loader).display;
    if (display == "block"){
        var child = document.getElementById("loader-ul").childNodes;
        alert(child);
    }
    else{
        alert(display);
    }
}

#loader{
    display: block;
    position: fixed;
    height: 100%;
    width: 100%;
    background-color: white;
    z-index: 9999;
}

<!DOCTYPE>
<html>
    <header>
        <title>myweb</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </header>
    <body onclick="loading()">
        <div id="loader">
            <div class="center">
                <ul id="loader-ul">
                    <li>
                    </li><li>
                    </li><li>
                    </li><li>
                    </li><li>
                    </li><li>
                    </li><li>
                    </li><li>
                    </li><li>
                    </li><li>
                    </li><li>
                    </li><li>
                    </li><li>
                    </li><li>
                    </li><li>
                    </li><li>
                    </li><li>
                    </li><li>
                    </li><li>
                    <li></li>
                </ul>
            </div>
        </div>
    </body>
    <script type="text/javascript" src="script.js"></script>
</html>

Thank you! IT works! But why my code didn't work? (I am asking because it worked on my other website design) — GeorGios, Sep 24 '16 at 18:53
@GeorGios are you sure that on your other site you were not setting/changing the display property from JS (*or that it was not hardcoded in the html*)? Because when you change the style through JS it is applied on the element through the `style` attribute. If you have a link to the other site i could have a look and tell you why it worked there. — Gabriele Petrioli, Sep 24 '16 at 18:56

score 2 · Answer 2 · answered Sep 24 '16 at 18:52

document.style doesn't return style cascaded from stylesheet, only the ones set by JavaScript or within the element using style attribute... Use getComputedStyle instead

var loader = document.getElementById("loader");
var loadDisplay = window.getComputedStyle(loader, null).getPropertyValue("display");

Javascript: document.getElementById("el").style.display returns empty string but is not?

2 Answers2