Javascript 尝试使用JS切换背景色

我是JavaScript新手，我试图通过更改元素的类来获得一个按钮来更改元素的背景色。 我结合了一些不同来源的js，但它不起作用，我也不知道为什么

函数myFunc（）{
变量y=document.getElementById（“bg-change1”）.getAttribute（“类”）；
如果（y==“正常”）{
y=“活动”；
}否则{
y=“正常”；
}
}

。正常{
背景色：白色；
}
.主动{
背景颜色：绿色；
}

点击这里
等

您可以使用纯JavaScript以短格式完成：

function myFunc() {
   var y = document.getElementById("bg-change1");
   y.classList.toggle("active")
}

---

但是请记住，当前的css选择器顺序必须使“.active”类优先于“.normal”。

您需要在最后分配值，您只得到了不够的值。您只是缺少了

document.getElementById（“bg-change1”）.setAttribute（“class”，y）位于函数末尾


函数myFunc（）{
变量y=document.getElementById（“bg-change1”）.getAttribute（“类”）；
如果（y==“正常”）{
y=“活动”；
}否则{
y=“正常”；
}
document.getElementById（“bg-change1”）.setAttribute（“类”，y）；
}
。正常{
背景色：白色；
}
.主动{
背景颜色：绿色；
}

点击这里
等

getAttribute（“类”）
在调用属性时返回属性的内容。因为这是一个字符串，所以没有对元素的引用。因此，重新分配
y
没有任何作用

要实际更改属性，可以使用
setAttribute（“class”，“active”）
。但这不是一个好的解决方案，因为您不能有多个类，而
normal
类是不必要的

只需使用不同的选择器（例如，
#bg-change1
）应用默认样式，并覆盖要在
.active
选择器中更改的属性。然后，您可以使用
document.getElementById（“bg-change1”）.classList.toggle（“active”）
在两种“模式”之间切换。您成功地获得了属性，但从未更改或设置它。使用
document.getElementById（“bg-change1”）.setAttribute（“class”，y）执行该操作

例如：


函数myFunc（）{
变量y=document.getElementById（“bg-change1”）.getAttribute（“类”）；
如果（y==“正常”）{
y=“活动”；
}否则{
y=“正常”；
}
document.getElementById（“bg-change1”）.setAttribute（“类”，y）；
}
。正常{
背景色：白色；
}
.主动{
背景颜色：绿色；
}
点击这里
等

这里您正在检索y中的类并更改类名，但它没有设置为返回元素

相反，你可以使用

function myFunc() {
  var y = document.getElementById("bg-change1").getAttribute("class");
  if (y === "normal") {
    document.getElementById("bg-change1").classList.remove('normal');
    document.getElementById("bg-change1").classList.add('active');
  } else {
    document.getElementById("bg-change1").classList.remove('active');
    document.getElementById("bg-change1").classList.add('normal');
  }
}

这是一种添加和删除类的狭义方法。我建议实现toggle类方法，请参见以下内容：



函数myFunc（）{
变量y=document.getElementById（“bg-change1”）；
y、 切换（“活动”）；
}
。正常{
背景色：白色；
}
.主动{
背景颜色：绿色；
}

点击这里
等

也许最好添加完整的代码来向他展示；）基于他的代码，只要遵循我的函数就无需更改，这足以完美地工作。我知道，但它只会让您的答案更完整，或者使用Hanif的答案时使用更短的格式。切换函数Nonymous coward downvoter care以评论？请帮我们大家一个忙，养一对，解释一下这个答案有什么问题。