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

【问题标题】：javascript - Change text color multiple times between two color rangesjavascript - 在两个颜色范围之间多次更改文本颜色
【发布时间】：2019-04-04 11:48:12
【问题描述】：

我想知道是否有人可以帮助我多次更改文本的颜色，然后将颜色 #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次。

（对不起，我的英语）

谢谢

【问题讨论】：

所以你要不断地改变颜色吗？
所以它适用于myid1，但不适用于myid2？
是的，多次
根本不起作用，只更改为#FFFFFF
@RobinZigmond 这不是唯一的问题，在某些浏览器中，颜色会转换为 rgb，因此无论哪种方式检查都不起作用

标签： javascript html css colors textcolor

【解决方案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>

【讨论】：

【解决方案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;
}

&lt;div class="change-color"&gt;CHVRCHES&lt;/div&gt;

【讨论】：

【解决方案3】：

您需要比较值，而不是分配它们。在条件中放两个等号。

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

UPD：另外，通常在使用javascript设置颜色时，会转换为RGB，因此无法再与HEX进行进一步比较。您必须比较和设置 RGB 中的值，但这不是好的做法。最好的解决方案是创建一个额外的类并通过 CSS 对其进行样式设置，这将允许您检查元素上是否存在类，并基于此删除或添加此类。

【讨论】：