Javascript 在样式之间来回切换onClick（）-切换大小写

在本页上：

每次用户单击按钮时，我都会尝试在样式之间来回切换

我使用的开关盒符合以下代码：

函数changeColor（）{
让toggle=document.getElementById（“更改颜色”）；
toggle.toggleStatus=“on”；
开关（切换状态）{
案例“关于”：
toggle.toggleStatus=“关闭”；
toggle.style.color=“紫色”；
toggle.style.backgroundColor=“黄色”；
打破
案例“关闭”：
toggle.toggleStatus=“on”；
toggle.style.color=“黄色”；
toggle.style.backgroundColor=“紫色”；
打破
}
}

#更改颜色{
宽度：100px；
高度：100px；
颜色：黄色；
背景颜色：紫色
}

变色

html元素中没有toggleStatus。一种方法是jQuery的

toggleClass（）

或者，如果您想在纯js中执行此操作，您可以添加一个名为

status

的

data

属性来控制开关大小写

这是在purejavascript中实现的可能方法之一

函数changeColor（）{
让toggle=document.getElementById（“更改颜色”）；
让toggleStatus=toggle.dataset.status；
开关（切换状态）{
案例“关于”：
toggle.dataset.status=“关闭”；
toggle.style.color=“紫色”；
toggle.style.backgroundColor=“黄色”；
打破
案例“关闭”：
toggle.dataset.status=“on”；
toggle.style.color=“黄色”；
toggle.style.backgroundColor=“紫色”；
打破
}
}

#更改颜色{
宽度：100px；
高度：100px；
颜色：黄色；
背景颜色：紫色
}

变色

这不是开关箱的问题

首先，toggleStatus不是一个属性

第二，每次函数运行时，

toggle.toggleStatus=“on”

总是将属性设置为on，所以这就是为什么switch case只为

'on'

您可以这样做：

var-toggleStatus=“on”；
函数changeColor（）{
让toggle=document.getElementById（“更改颜色”）；
开关（切换状态）{
案例“关于”：
切换状态=“关闭”；
toggle.style.color=“紫色”；
toggle.style.backgroundColor=“黄色”；
打破
案例“关闭”：
toggleStatus=“on”；
toggle.style.color=“黄色”；
toggle.style.backgroundColor=“紫色”；
打破
}
}

#更改颜色{
宽度：100px；
高度：100px；
颜色：黄色；
背景颜色：紫色
}

变色

由于

toggleStatus

不是DOM元素的“真实”属性

#change color

，因此每次在函数中将该属性设置为：

changeColor（）

为“on”时，它都会被视为新实例，因此不会继承上一次调用的以前历史记录或属性

您可以通过在该函数之外声明属性来解决此问题，如下所示：

const theToggle = document.getElementById("change-color");
theToggle.toggleStatus = "on";

function changeColor() {
  switch (theToggle.toggleStatus) {
    case "on":
      theToggle.toggleStatus = "off";
      theToggle.style.color = "purple";
      theToggle.style.backgroundColor = "yellow";
      break;
    case "off":
      theToggle.toggleStatus = "on";
      theToggle.style.color = "yellow";
      theToggle.style.backgroundColor = "purple";
      break;
  }
}

这样，您的自定义属性在浏览器中“保持打开”，并且可以在设置时由DOM更改和继承

例如：

const theToggle=document.getElementById（“更改颜色”）；
toggle.toggleStatus=“on”；
函数changeColor（）{
开关（切换状态）{
案例“关于”：
toggle.toggleStatus=“关闭”；
toggle.style.color=“紫色”；
toggle.style.backgroundColor=“黄色”；
打破
案例“关闭”：
toggle.toggleStatus=“on”；
toggle.style.color=“黄色”；
toggle.style.backgroundColor=“紫色”；
打破
}
}

#更改颜色{
宽度：100px；
高度：100px；
颜色：黄色；
背景颜色：紫色
}

变色

使用此功能，谢谢。如果可能的话，我试着使用纯JS。因此，您所说的名为status的数据属性是

toggleStatus

吗？我添加了一个数据属性来存储当前状态

data status=“on”

将使按钮具有黄色背景，而

data status=“off”

将使按钮具有紫色背景。有一种更简洁的方法可以做到这一点，即维护两个类并添加和删除它们。谢谢所以关键是使用

.classList

方法？我看到你可以用

.classList

——添加、删除、切换等等做很多事情。