Javascript 单击以更改元素颜色

我编写这个小脚本是为了在单击时更改一个类的颜色，它可以工作，但我希望通过第二次单击来恢复原色

函数changeColor1（）{
document.getElementById（“ip自定义”）.className=“红色”；
}
函数init（）{
document.getElementById（“ip自定义”）.onclick=changeColor1；
}
window.onload=init（）
.red{
颜色：#f00；
}
示例
您可以像下面这样切换class
红色

function changeColor1() {
    document.getElementById("ip-custom").classList.toggle('red');   
}

完整片段


函数changeColor1（）{
document.getElementById（“ip自定义”）.classList.toggle（“红色”）；
}
函数init（）{
document.getElementById（“ip自定义”）.onclick=changeColor1；
}
window.onload=init（）
.red{
颜色：#f00；
}
示例
如果要使用纯js，请使用
类列表。切换
功能：

function changeColor1() {
    document.getElementById("ip-custom").classList.toggle('red');   
}

function changeColor1() {
    $("#ip-custom").toggleClass("red");
}

如果使用jQuery，则可以使用
toggleClass
函数：

function changeColor1() {
    document.getElementById("ip-custom").classList.toggle('red');   
}

function changeColor1() {
    $("#ip-custom").toggleClass("red");
}


文件
文件
您有一个简单的解决方案，可以将状态保存在变量中

var clicked = false;

function changeColor1() {
   if(!clicked){
      document.getElementById("ip-custom").className = "red";
      clicked = true;   
   }else{
         document.getElementById("ip-custom").className = "";
         clicked = false; 
   }
}

因为您已经包含了标签
jquery
，所以我将使用该标签和简单的旧javascript提供答案

JavaScript

检查该类是否存在，以确定是否应添加或删除该类


函数changeColor1（）{
if（document.getElementById（“ip自定义”）.className==“红色”）
document.getElementById（“ip自定义”）.className=“”；
其他的
document.getElementById（“ip自定义”）.className=“红色”；
}
函数init（）{
document.getElementById（“ip自定义”）.onclick=changeColor1；
}
window.onload=init（）
.red{
颜色：#f00；
}
示例
此解决方案仅适用于您的情况，即当元素没有类时。
因此，它添加了红色类o删除所有类别


函数toggleClassRed（）{
var element=document.getElementById（“ip自定义”），
clazz=element.className | |“”；
element.className=clazz==“红色”：“；
}
函数init（）{
document.getElementById（“ip自定义”）.onclick=toggleClassRed；
}
window.onload=init（）
.red{
颜色：#f00；
}
示例
为什么在您的情况下使用布尔变量而不选中document.getElementById（“ip自定义”）.className==“红色”
？可能是