单击以更改元素颜色

Click to change element color

本文关键字：元素 颜色 单击      更新时间：2023-09-26

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

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>

您可以像

下面这样切换类red。

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

完整片段

function changeColor1() {
    document.getElementById("ip-custom").classList.toggle('red');   
}
function init() {
    document.getElementById("ip-custom").onclick = changeColor1;
}
window.onload = init();
.red {
    color: #f00;
}
<button id="ip-custom">Example</button>

如果你想使用普通的js，请使用classList.toggle函数：

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

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

function changeColor1() {
    $("#ip-custom").toggleClass("red");
}
  • 类列表文档
  • 切换类文档

既然你已经包含了标签jquery，我将使用它和普通的旧JavaScript提供一个答案。

JavaScript

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

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();
.red {
  color: #f00;
}
<button id="ip-custom">Example</button>

jQuery

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

在匹配元素集中的每个元素中添加或删除一个或多个类，具体取决于类的存在或状态参数的值。

$(function() {
  $('#ip-custom').on('click', function() {
    $(this).toggleClass('red');
  });
});
.red {
  color: #f00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="ip-custom">Example</button>

此解决方案仅适用于元素没有类的情况。因此，它添加了红色类 o 删除所有扣屑;

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>

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

var clicked = false;
function changeColor1() {
   if(!clicked){
      document.getElementById("ip-custom").className = "red";
      clicked = true;   
   }else{
         document.getElementById("ip-custom").className = "";
         clicked = false; 
   }
}
相关文章：