如何在IF-THEN构造中使用javascript的css值？_Javascript_Css

如何在IF-THEN构造中使用javascript的css值？

javascript css

如何在IF-THEN构造中使用javascript的css值？,javascript,css,Javascript,Css,我试着每10秒旋转三个div。我找到了一些jquery选项的示例，但我想用纯javascript实现这一点。下面的代码看起来应该可以工作，但实际上不行 function changediv() { If(document.getElementById('co5').style.display == 'block') { document.getElementById('co3').style.display = 'block'; document.get

我试着每10秒旋转三个div。我找到了一些jquery选项的示例，但我想用纯javascript实现这一点。下面的代码看起来应该可以工作，但实际上不行

 function changediv() {
    If(document.getElementById('co5').style.display == 'block') {
        document.getElementById('co3').style.display = 'block';
        document.getElementById('co4').style.display = 'none';
        document.getElementById('co5').style.display = 'none';
    }
    elseif(document.getElementById('co3').style.display == 'block') {
        document.getElementById('co3').style.display = 'none';
        document.getElementById('co4').style.display = 'block';
        document.getElementById('co5').style.display = 'none';
    }
    elseif(document.getElementById('co4').style.display == 'block') {
        document.getElementById('co3').style.display = 'none';
        document.getElementById('co4').style.display = 'none';
        document.getElementById('co5').style.display = 'block';
    }
}
setInterval(changediv, 10000);

您可以使用

elseif

，但如果

，则必须使用else
使用以下命令：
function changediv(){
    if (document.getElementById('co5').style.display == 'block') {
       document.getElementById('co3').style.display = 'block';
       document.getElementById('co4').style.display = 'none';
       document.getElementById('co5').style.display = 'none';
    } else if (document.getElementById('co3').style.display == 'block') {
       document.getElementById('co3').style.display = 'none';
       document.getElementById('co4').style.display = 'block';
       document.getElementById('co5').style.display = 'none';
    } else if (document.getElementById('co4').style.display == 'block') {
       document.getElementById('co3').style.display = 'none';
       document.getElementById('co4').style.display = 'none';
       document.getElementById('co5').style.display = 'block';
    }   
}

setInterval(changediv, 10000);

此外，如以下评论所述：
在我看来更像是一团糟？如果是一个
语法错误，它只是继续
使用if
，而不是if
试试这个，使用开关

var i=0；
函数更改（）
{
i++；
开关（一）
{
案例1：
document.getElementById（“d1”）.style.display=“block”；
document.getElementById（“d2”）.style.display=“无”；
document.getElementById（“d3”）.style.display=“无”；
打破
案例2：
document.getElementById（“d1”）.style.display=“无”；
document.getElementById（“d2”）.style.display=“block”；
document.getElementById（“d3”）.style.display=“无”；
打破
案例3：
document.getElementById（“d1”）.style.display=“无”；
document.getElementById（“d2”）.style.display=“无”；
document.getElementById（“d3”）.style.display=“block”；
打破
}
如果（i==3）{i=0}
}
设置间隔（更改，1000）；
1.
2.
3.
div{显示：无；宽度：50px；文本对齐：中心；字体大小：25px；边框：实心2px rgb（100100100）；边框半径：10px；颜色：白色；}
#d1{背景：红色}
#d2{背景：绿色}
#d3{背景：蓝色}

在我看来更像是一团糟？第一个中的大写I
，如果是一个语法错误，它会继续…通过将dom元素保存为变量来清理代码，这可能有助于提高可读性（即var co5=document.getElementById（'co5'）；
）。现在你编辑了我在帖子中提到的所有错误。你现在的问题是什么？我没有编辑我的错误，不知道这是怎么发生的。我确实做了建议的更改，但仍然不起作用，我现在将尝试将dom元素转换为变量，然后我会报告。这是可行的，尽管它仍然不理想。不确定我做错了什么，但启动时没有加载设置间隔。我必须将鼠标移到一个菜单项或启动另一个javascript命令的东西上，然后它开始工作。改天我要再研究一下。试着把这段代码放到文档中。ondomcontentready
或窗口中。onload这是一个很好的解决方案，事实上这就是我开始使用的方法，效果很好。但是，也有一种外部方法可以将“焦点”更改为三个div中的任何一个，其思想是当“焦点”离开div时，该功能将从该点继续，而不是重新开始。因此，我希望它基于当前显示状态。
<html>
<body>
    <script>
        var i = 0;
        function change()
        {
            i++;
            switch(i)
            {
                case 1:
                    document.getElementById("d1").style.display = "block";
                    document.getElementById("d2").style.display = "none";
                    document.getElementById("d3").style.display = "none";
                    break;
                case 2:
                    document.getElementById("d1").style.display = "none";
                    document.getElementById("d2").style.display = "block";
                    document.getElementById("d3").style.display = "none";
                    break;
                case 3:
                    document.getElementById("d1").style.display = "none";
                    document.getElementById("d2").style.display = "none";
                    document.getElementById("d3").style.display = "block";
                    break;
            }
            if(i==3){i=0}
        }
        setInterval(change, 1000);
    </script>

    <div id="d1">1</div>
    <div id="d2">2</div>
    <div id="d3">3</div>

    <style>
        div{display:none; width:50px; text-align:center; font-size:25px; border: solid 2px rgb(100,100,100); border-radius:10px; color: white;}
        #d1{background: red}
        #d2{background: green}
        #d3{background: blue}
    </style>

</body>