Question

我正在制作带有动画效果的主页。我在div中有display: none。几秒钟后我想要display: block。我正在使用一些Javscript。现在的问题是，我无法搜索计时器脚本。

我希望我的CSS会在几秒后改变。我的代码：

var myVar = setInterval(myTimer, 1000);
    function myTimer() {
        document.getElementsByClassName("logindiv").style.display = "block";
    }

那么，如何使用计时器更改我的CSS？

Answer 1

getElementsByClassName返回集合。您使用如下索引：

var myVar = setInterval(myTimer, 1000);
function myTimer() {
    document.getElementsByClassName("logindiv")[0].style.display = "block";
    // for test
    document.getElementsByClassName("logindiv")[0].style.color = "red";
}

.logindiv {
  display: none;
}

<div class="logindiv">Test</div>

Answer 2

document.getElementsByClassName返回我们所有的类元素，您需要使用for循环来更改所有这些元素。如果您只需要一个，请使用elements[0].style.display = "block";

<div class="logindiv" style="display:none">
  This is login div
</div>

<script>
   setTimeout(myTimer, 1000);
    function myTimer() {
        var elements = document.getElementsByClassName("logindiv");
        for(i=0;i<elements.length;i++){
        	elements[i].style.display = "block";
        }
    }
</script>

jsfiddle :: https://jsfiddle.net/5bxmcf8z/

一秒钟后用Javascript更改CSS

2 个答案: