Question

我有一个div类rectangle-box - 最初这应该被隐藏，但是然后使用JavaScript它应该在四秒延迟后出现。但是，它没有出现。这是由于getElementsByClassName()函数中的错误吗？

<html>
    <head></head>
    <body>
        <div class='rectangle-box'>
            <div class='rectangle-content'>
                <div>
                    <span>Hello</span>
                </div>
            </div>
        </div>
    </body>

    <script type="text/javascript">
        var timePeriodInMs = 4000;
        setTimeout(function() 
            { 
            getElementsByClassName("rectangle-box").style.display = 'block'; 
            } 
            timePeriodInMs);
    </script>

<style>
.rectangle-box{
    position: relative;
    width: 50%;
    overflow: hidden;
    background: #4679BD;
    display: none;
}
.rectangle-box:before{
    content: "";
    display: block;
    padding-top: 50%;
}
.rectangle-content{
    position:  absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    color: white;
}
.rectangle-content div {
   display: table;
   width: 100%;
   height: 100%;
}
.rectangle-content span {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    color: white
}

</style>

Answer 1

getElementsByClassName是document对象的方法。由于它不是一个全局函数，你不能这样称呼它。

var list = document.getElementsByClassName("rectangle-box");

同样getElementsByClassName会返回NodeList。您应该遍历返回的列表：

Array.prototype.forEach.call(list, function(element) {
    // do something with element
});

或使用括号表示法[index]或.item(index)方法按索引获取特定的包装元素：

list[0].style.display = 'block'; 
list.item(0).style.display = 'block';

请注意，代码中也存在语法错误，缺少,。

setTimeout(function() { 
    // ... 
}, timePeriodInMs);

Answer 2

首先，getElementsByClassName不是函数，document.getElementsByClassName返回模式列表而不是单个对象使用

    document.getElementsByClassName("rectangle-box")[0].style.display="block";

否则

          use id in html in element
         <div class='rectangle-content' id='rectangle-content'>   <div><span>hello</span></div></div>
      and use

        document.getElementById("rectangle-box").style.display="block";

Answer 3

由于您可能在该类中有多个元素，因此需要循环遍历nodelist，为每个DOM节点设置display属性。（正如Vohuman所提到的那样，原始代码中存在语法错误，因为timePeriodInMs中的setTimeout之前应该有一个逗号，这会在控制台中显示为错误。）

setTimeout(function () {
    var nodes = document.getElementsByClassName("rectangle-box");
    for (var i = 0, l = nodes.length; i < l; i++) {
        nodes[i].style.display = 'block';
    }
}, timePeriodInMs);

DEMO

div类在指定时间后不显示

3 个答案: