Question

我正在尝试将div背景颜色更改为不同的颜色，具体取决于div的当前颜色，单击div时。以下代码不起作用。我认为它与我的“if”语句有关，因为如果我只是将它们改为1种颜色而没有“if”语句，它可以正常工作。

<script language="JavaScript">
function setColor(blockId) {
    if (document.getElementById(blockId).style.background == '#FF0000') {
        document.getElementById(blockId).style.background = '#0000FF';
    }else if (document.getElementById(blockId).style.background == '#0000FF') {
        document.getElementById(blockId).style.background = '#999999';
    }else if (document.getElementById(blockId).style.background == '#999999') {
        document.getElementById(blockId).style.background = '#FF0000';
    }
}
</script>

<div id="b1" style="background-color:#FF0000; height:100px; width:100px;" onClick="setColor('b1')"></div>

Answer 1

增加索引以从背景列表中识别您正在使用的背景。您可以将该索引存储为元素上的属性。

var backgrounds = ["#0000FF", "#999999", "#FF0000"];
function setColor(el) {
    el.colorIdx = el.colorIdx || 0;
    el.style.backgroundColor = backgrounds[el.colorIdx++ % backgrounds.length];
}

此外，不是通过document.getElementById()对该元素进行查找，只需从this处理程序传递onclick，您的函数就会引用元素本身。

<div onclick="setColor(this)"></div>

工作演示：http://jsfiddle.net/gilly3/vPMPb/

Answer 2

您遇到的问题是由于浏览器理解style.background属性的方式不一致。在某些浏览器中style.backgroundColor（使用此而不是style.background btw）将是＆＃34;＃FF0000＆＃34;而在其他人中，它将是＆＃34;＃ff000＆＃34;在其他人＆＃34; rgb（255,0,0）＆＃34;。所以检查字符串不会对你有用。我建议将颜色值存储在数组中并保持全局位置变量。每次单击div时，都会启用索引并使用该数组。与此类似：

Demo | Source

<script language="JavaScript">
    var colors = ["#FF0000","#0000FF","#999999"];
    var idx = 0;

function setColor(blockId) {
    document.getElementById(blockId).style.backgroundColor = colors[++idx%3];
}
</script>

<div id="b1" style="background-color:#FF0000; height:100px; width:100px;" onClick="setColor('b1')"></div>

编辑：顺便说一句，++idx%3只是++idx（评估前增加）和%3（模3，即＆＃34;值的余数除以3＆＃ 34）

Answer 3

这可能不是你的逻辑。除非属性驻留在给定DOM元素节点上的样式属性中，否则无法从DOM推断表示属性。只需使用静态HTML中的style属性为目标HTML标记提供背景颜色。现在您的JavaScript并检测背景颜色属性并按设计执行。

使用Javascript在onClick上循环显示div背景颜色

3 个答案: