尝试用JS切换背景颜色

Question

我是JavaScript的新手，我试图通过改变它的类来获得一个改变元素背景颜色的按钮。 我从几个不同的来源组合js，但它不起作用，我无法弄清楚为什么。

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

 .normal { background-color: white; } .active { background-color: green; } 

 <body> <button onclick="myFunc()">click here</button> <div id="bg-change1" class="normal"> <p>Lorem ipsum and etc</p> </div> </body> 

Answer 1

你可以用纯JavaScript做短格式：

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

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

Answer 2

你需要在最后分配值，你只得到不够的值。 你只是缺少document.getElementById("bg-change1").setAttribute("class",y); 在功能的最后。

 function myFunc() { var y = document.getElementById("bg-change1").getAttribute("class"); if (y === "normal") { y = "active"; } else { y = "normal"; } document.getElementById("bg-change1").setAttribute("class",y); } 

 .normal { background-color: white; } .active { background-color: green; } 

 <body> <button onclick="myFunc()">click here</button> <div id="bg-change1" class="normal"> <p>Lorem ipsum and etc</p> </div> </body> 

Answer 3

getAttribute("class")在您调用它时返回属性的内容。 由于这是一个字符串，因此没有对该元素的引用。 因此，重新分配y不会做任何事情。

要实际更改属性，可以使用setAttribute("class", "active") 。 但这不是一个好的解决方案，因为你不能拥有多个类，而normal类是不必要的。

只需使用不同的选择器（例如#bg-change1 ）应用默认样式，并覆盖要在.active选择器中更改的.active 。 然后，您可以使用document.getElementById("bg-change1").classList.toggle("active")在两个“模式”之间切换。

Answer 4

这是添加和删除类的一种循环方式。 我建议实现toggle类方法，见下文：

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

 .normal { background-color: white; } .active { background-color: green; } 

 <body> <button onclick="myFunc()">click here</button> <div id="bg-change1" class="normal"> <p>Lorem ipsum and etc</p> </div> </body> 

Answer 5

在这里，您将在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');
  }
}

Answer 6

您成功获取了该属性，但您从未更改或设置该属性。 使用document.getElementById("bg-change1").setAttribute("class", y);执行此document.getElementById("bg-change1").setAttribute("class", y);

例：

 function myFunc() { var y = document.getElementById("bg-change1").getAttribute("class"); if (y === "normal") { y = "active"; } else { y = "normal"; } document.getElementById("bg-change1").setAttribute("class", y); } 

 .normal { background-color: white; } .active { background-color: green; } 

 <button onclick="myFunc()">click here</button> <div id="bg-change1" class="normal"> <p>Lorem ipsum and etc</p> </div>