Question

我需要使用custList中的class =“ side1”，因为那是我希望每次经过一定时间后都闪烁不同颜色的多维数据集的一面。我发现它起作用的唯一方法是使用setInterval，但我不希望它每隔这么多秒就不断更改颜色。如果立方体在那儿坐了5分钟，它将从绿色变成黄色，如果在那儿呆了7分钟，它将变成红色，保持红色直到完成，然后消失。我该怎么做才能使其正常工作？

<div id="loader"></div>
<div style="display: none;" id="myDiv" class="animate-bottom">
    <%--The routing cube--%>
    <div id="wrapD3Cube" class="normal"></div>
</div>

var custList = "";
        var top = 0;
        var left = 0;
        for (var i = 0; i < Data.length; i++) {

            custList += '<div class="D3Cube" id="D3Cube"' + i + '>';
            custList += '<div class="side1" id="side1' + i + '" 
style="position:absolute;  opacity: 1.05;  width: 112px; height: 112px;"> 
</div > ';. 

var changeColor = 0
    function colors()  {

        if (changeColor < 4000) {
            document.getElementsByClassName("side1").style.backgroundColor 
 = '#91CB8A';


        }
        else if (changeColor >= 5000) {
            document.getElementsByClassName("side1").style.backgroundColor 
= '#F7B448';


        }
        else if (changeColor >= 6000) {
            document.getElementsByClassName("side1").style.backgroundColor 
= '#E84F60';

        }

    }
    colors();

Answer 1

函数document.getElementsByClassName返回一个HTMLCollection，因此您必须选择一个元素：

document.getElementsByClassName("side1")[0].style.backgroundColor = "color";

设置颜色未定义的属性“ backgroundColor”

1 个答案: