Question

我写了这个小脚本来改变点击类的颜色，它可以工作，但我会通过第二次点击恢复原色。

function changeColor1() {
    document.getElementById("ip-custom").className = "red";
   
}


function init() {
    document.getElementById("ip-custom").onclick = changeColor1;

}

window.onload = init();

.red {
    color: #f00;
}

<button id="ip-custom">Example</button>

Answer 1

您可以像以下一样切换课程red。

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

完整摘要

＆＃13;

function changeColor1() {
    document.getElementById("ip-custom").classList.toggle('red');   
}


function init() {
    document.getElementById("ip-custom").onclick = changeColor1;

}

window.onload = init();

＆＃13;

.red {
    color: #f00;
}

＆＃13;

<button id="ip-custom">Example</button>

＆＃13;

Answer 2

如果要使用普通js，请使用classList.toggle功能：

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

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

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

classList文档
toggleClass文档

Answer 3

由于您已添加了标记jquery，因此我将使用该标记和普通旧javascript提供答案。

<强>的JavaScript

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

＆＃13;

function changeColor1() {
  if (document.getElementById("ip-custom").className == "red")
    document.getElementById("ip-custom").className = "";
  else
    document.getElementById("ip-custom").className = "red";
}


function init() {
  document.getElementById("ip-custom").onclick = changeColor1;
}

window.onload = init();

＆＃13;

.red {
  color: #f00;
}

＆＃13;

<button id="ip-custom">Example</button>

＆＃13;

<强>的jQuery

您可以使用jQuery的toggleClass()方法。

根据类的存在或state参数的值，在匹配元素集中的每个元素中添加或删除一个或多个类。

＆＃13;

$(function() {
  $('#ip-custom').on('click', function() {
    $(this).toggleClass('red');
  });
});

＆＃13;

.red {
  color: #f00;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="ip-custom">Example</button>

＆＃13;

Answer 4

此解决方案仅适用于您的情况，当元素没有类时。所以，它添加红色类o删除所有clasess;

function toggleClassRed() {
    var element = document.getElementById("ip-custom"),
        clazz = element.className || '';

    element.className = clazz === '' ? 'red' : '';
}


function init() {
    document.getElementById("ip-custom").onclick = toggleClassRed;

}

window.onload = init();

.red {
    color: #f00;
}

<button id="ip-custom">Example</button>

Answer 5

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

var clicked = false;

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

单击以更改元素颜色

5 个答案: