Javascript： document.getElementById( "el" ).style.display返回空字符串，但不是？

我试图写一些基本的javascript代码，只是检查如果一个元素是块或无(display: block或display: none)。这是我第一次遇到这个问题，因为它在我的另一个网站上运行得很好。下面是我的代码:

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(这是必要的):

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

html(这是必要的):

<!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>

我有javascript的经验(因为这段代码只是为了检查是否一切正常
从来没有遇到过这样的bug(如果我有，那是因为我没有。有CSS属性或我没有链接JavaScript到HTML正确)。

那么，element.style将返回内联的style属性值

使用window.getComputedStyle来查看渲染的样式。

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>

文档。style不返回从样式表级联的样式，只返回JavaScript设置的样式或使用style属性的元素内的样式。使用getComputedStyle代替

var loader = document.getElementById("loader");var loadDisplay =窗口。getComputedStyle(装载机,null) .getPropertyValue("显示");

相关内容

最新更新

热门标签：