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

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
– GeorGios, Commented Sep 24, 2016 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
– Oriol, Commented Sep 24, 2016 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
– Oriol, Commented Sep 24, 2016 at 18:57

Gabriele Petrioli · Accepted Answer · 2016-09-24 18:49:34Z

9

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>

answered Sep 24, 2016 at 18:49

Gabriele Petrioli

197k35 gold badges275 silver badges331 bronze badges

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

2 Comments

GeorGios Over a year ago

Thank you! IT works! But why my code didn't work? (I am asking because it worked on my other website design)

Gabriele Petrioli Over a year ago

@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.

Adeola · Accepted Answer · 2016-09-24 18:52:20Z

2

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

answered Sep 24, 2016 at 18:52

Adeola

1181 silver badge7 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Linked

Related