Question

我试图通过单击按钮来更改div的背景颜色。

例如，如果颜色是青色（＃00ffff - 它应该变为黄色（'ffff00）。

如果颜色为黄色 - 则应更改为品红色（＃ff00ff）。

如果颜色是洋红色 - 它应该还原为青色。

我已经设法将颜色从青色更改为黄色，但是我不确定如何编写我的if语句（假设if语句是最好的方法？）来根据当前颜色更改颜色。

 function ColorFunction() {
   if (light.getItem("backgroundColor") == '#00ffff') {
     document.getElementById("light").style.backgroundColor = "#ffff00";
   }
   else
     if (light.getItem("backgroundColor") == '#ffff00') {
       document.getElementById("light").style.backgroundColor = "#ff00ff";
     }
   else
     if (light.getItem("backgroundColor") == '#ff00ff') {
       document.getElementById("light").style.backgroundColor = "00ffff";
     }
 }

.main {
  width:250px;
  color: #202020;
  background-color: #d0d0d0;
}

.light {
  width: 50px;
  height: 50px;
  background-color: #00ffff
}

#burn {
  width: 150px;
  font-style: italic;
}

#button {
  font-style: bold;
  width: 150px;
}

<h1>Disco Inferno</h1>
    <div class="light" id="light">
      div
    </div>

    <button onClick="ColorFunction()">Burn!</button>

Answer 1

好的，我们从这里开始吧。

您有一个标识为light的元素，但它不会自动成为您可以在javascript中使用的变量。它很容易使它成为一个：

var light = document.getElementById("light");

然后，我甚至不确定你从哪里得到getItem - 也许这是一个猜测 - 但它不是HTMLElement上的有效方法

您可以使用light.style.backgroundColor执行此操作 - 请参阅下面的代码段。

var colors = ["rgb(0, 255, 255)","rgb(255, 255, 0)","rgb(255, 0, 255)"];

function ColorFunction() { 
   var light = document.getElementById("light");
   var curr = light.style.backgroundColor;
   var next = colors.indexOf(curr)+1;
   light.style.backgroundColor = colors[next%colors.length];
 }

<h1>Disco Inferno</h1>
<div class="light" id="light" style="background-color:#00FFFF">
    Burn, baby burn!
</div>

    <button onClick="ColorFunction()">Burn!</button>

Answer 2

在将颜色直接指定给div后，您可以使用对象来移动颜色。

function ColorFunction() {
    var colors = {
            'rgb(0, 255, 255)': 'rgb(255, 255, 0)',
            'rgb(255, 255, 0)': 'rgb(255, 0, 255)',
            'rgb(255, 0, 255)': 'rgb(0, 255, 255)'
        },
        element = document.getElementById("light");
    element.style.backgroundColor = colors[element.style.backgroundColor];
}

.main { width:250px; color: #202020; background-color: #d0d0d0; }
.light { width: 50px; height: 50px; background-color: #00ffff; }
#burn { width: 150px; font-style: italic; }
#button { font-style: bold; width: 150px; }

<div class="light" id="light" style="background-color: #00ffff;"></div>
<button onClick="ColorFunction()">Burn!</button>

Answer 3

没有getItem（）是一些组合方法。查看控制台，您将看到它是一个错误。要阅读背景颜色，您应该使用样式。

var color = elementReference.style.backgroundColor

现在你依赖于JavaScript的一个不好的功能，你可以在其中定义一个与元素的id匹配的变量，它神奇地是对该元素的引用。你不应该这样做。您应该自己定义变量。

var elementReference = document.getElementById("light");

现在，当您阅读颜色值时，浏览器会返回不同的内容。十六进制，一些rgb。因此，检查颜色是一件坏事。该怎么办？使用CSS类。

＆＃13;

function ColorFunction(){
   var elem = document.getElementById("light");
   if(elem.classList.contains("red")) {
     elem.classList.remove("red");
     elem.classList.add("blue");
   } else if(elem.classList.contains("blue")) {
     elem.classList.remove("blue");
     elem.classList.add("green");
   } else {
     elem.classList.remove("green");
     elem.classList.add("red");     
   }
}

＆＃13;

.red { background-color: red;}
.blue {background-color: blue;}
.green {background-color: green;}

＆＃13;

<h1>Disco Inferno</h1>
<div class="light red" id="light">
  div
</div>

<button onClick="ColorFunction()">Burn!</button>

＆＃13;

现在还有其他方法可以使用添加/删除进行检查，但这是基本想法。

Javascript - 根据当前颜色更改div的颜色

3 个答案: