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

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，因此无法再与HEX进行进一步比较。您将不得不比较和设置RGB中的值，但这不是一个好习惯。最好的解决方案是创建一个额外的类并通过CSS设置样式，这将允许您检查元素上是否存在类，并在此基础上删除或添加此类。