GeorGios GeorGios - 2 months ago 15
Javascript Question

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

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


Answer

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>

Comments