Question

我正在尝试编写一些基本的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>

FACTS

我有使用javascript的经验（因为这段代码只是为了检查是否一切正常。
我花了几个小时看着那个简单的bug，我不知道怎么做为什么
从未有过这样的错误（如果有的话，那是因为我没有拥有CSS中的属性或我没有将JavaScript链接到HTML 正确地）。

Answer 1

好的，element.style会返回内联style属性值

使用window.getComputedStyle查看呈现的样式。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

document.style不返回样式表级联的样式，只返回由JavaScript设置的样式或使用样式属性的元素内的样式... 请改用getComputedStyle

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

Javascript：document.getElementById（“el”）。style.display返回空字符串但不是？

2 个答案: