javascript - 在两个颜色范围之间多次更改文本颜色
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javascript - 在两个颜色范围之间多次更改文本颜色相关的知识，希望对你有一定的参考价值。
我想知道是否有人可以帮助我多次改变文本的颜色然后将颜色＃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次。
（对不起，我的英文）
谢谢
答案
除了您使用“=”指定颜色而不是使用“==”进行检查之外，颜色也被设置为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>另一答案
问题是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>另一答案
您需要比较值，而不是分配它们。在条件下放两个等号。
if (document.getElementById(id).style.color == "#627CA9")
UPD：此外，通常在使用javascript设置颜色时，它会转换为RGB，因此无法再与HEX进行进一步比较。您将不得不比较和设置RGB中的值，但这不是一个好习惯。最好的解决方案是创建一个额外的类并通过CSS设置样式，这将允许您检查元素上是否存在类，并在此基础上删除或添加此类。
以上是关于javascript - 在两个颜色范围之间多次更改文本颜色的主要内容，如果未能解决你的问题，请参考以下文章