我有一个由 6 个框、div 组成的网页,它们通过交通灯颜色(红色、琥珀色或绿色)代表不同系统的当前状态。
我希望能够为每个 div 单独循环显示这些颜色,以便每个系统可以有不同的状态。
盒子的伪代码
<div id="system1">System Name</div>
<div id="system2">System Name</div>
<div id="system3">Systen Name</div>
等等。
CSS 在所有系统的页面加载时将背景颜色声明为红色,然后我希望能够单独单击每个 div 循环到琥珀色,然后是绿色,然后返回到红色以选择最合适的。
我正在努力使用 Javascript 来让它工作。我试图使用
document.getElementById(elem).style.backgroundColor = 'red';
在 If 语句中查看当前颜色并相应更改,但 Javascript 返回 rgb 值。例如,当我尝试时,
document.getElementById(elem).style.backgroundColor == 'rgb(255,231,51)')
它不匹配,尽管它应该匹配。
非常感谢任何建议!
最佳答案
我建议你使用类,
<style type="text/css">
.red {background-color:red;}
.amber {background-color:yellow;}
.green {background-color:green;}
</style>
<script type="text/javascript">
function changeColor(e) {
var c = e.className;
e.className = (c == 'red') ? 'amber' :
(c == 'amber') ? 'green' :
(c == 'green') ? 'red' : '';
}
</script>
<div class="red" id="system1" onclick="changeColor(this)">System Name</div>
<div class="green" id="system2" onclick="changeColor(this)">System Name</div>
<div class="amber" id="system3" onclick="changeColor(this)">Systen Name</div>
关于Javascript单独循环多个div的背景颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10982184/