Question

我想知道是否有人可以帮助我多次更改文本的颜色，然后将颜色＃627CA9更改为#FFFFFF，反之亦然。

我尝试过：

function changeColor(id) {
  var x = document.getElementById(id);
  if (document.getElementById(id).style.color = "#627CA9")
    document.getElementById(id).style.color = "#FFFFFF"
  else {
    document.getElementById(id).style.color = "#627CA9"; // forecolor
  }

}

<div style="cursor: pointer;" onclick="changeColor('myid1'); return false;" id="myid1" class="centered">CHVRCHES</div>
<div style="cursor: pointer;" onclick="changeColor('myid2'); return false;" id="myid2" class="centered">PVRIS</div>

代码仅将颜色更改1次。

（对不起，我的英语）

谢谢

Answer 1

除了您将颜色分配为“ =”而不是使用“ ==”进行颜色分配外，该颜色也被设置为RGB。对此进行检查似乎可行；

function changeColor(id) {
  var x = document.getElementById(id);
  
  if (x.style.color != "rgb(255, 255, 255)")
    x.style.color = "#FFFFFF";
  else {
    x.style.color = "#627CA9"; // forecolor
  }

}

<div style="cursor: pointer;" onclick="changeColor('myid1'); return false;" id="myid1" class="centered">CHVRCHES</div>
<div style="cursor: pointer;" onclick="changeColor('myid2'); return false;" id="myid2" class="centered">PVRIS</div>

Answer 2

问题是document.getElementById(id).style.color = "#627CA9"更改为document.getElementById(id).style.color == "#627CA9"，另外，您应该使用类并更改类的名称

function changeColor(id) {
  var x = document.getElementById(id);
  if (x.className === "white") x.className = "";
  else x.className = "white";
}

div {
  color: #627CA9;
}

.white {
  color: #FFFFFF;
}

<div style="cursor: pointer;" onclick="changeColor('myid1'); return false;" id="myid1" class="centered">CHVRCHES</div>
<div style="cursor: pointer;" onclick="changeColor('myid2'); return false;" id="myid2" class="centered">PVRIS</div>

您还可以使用CSS自动执行操作

@keyframes color-change {
  0% {
    color: #627CA9;
  }
  50% {
    color: #FFFFFF;
  }
  100% {
    color: #627CA9;
  }
}

.change-color {
  animation-name: color-change;
  animation-duration: 0.5s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

<div class="change-color">CHVRCHES</div>

Answer 3

您需要比较值，而不要分配它们。在这种情况下，请放两个相等的符号。

if (document.getElementById(id).style.color == "#627CA9")

UPD：此外，通常在使用javascript设置颜色时，它会转换为RGB，因此无法再与十六进制进行比较。您将不得不比较并设置RGB中的值，但这不是一个好习惯。最好的解决方案是创建一个附加类并通过CSS对其进行样式设置，这将使您可以检查元素上是否存在类，并基于此元素删除或添加该类。

javascript-在两个颜色范围之间多次更改文本颜色

3 个答案: