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选择器顺序必须要给出＆＃39; .active＆＃39;班级优先于＆＃39; .normal＆＃39;。

Answer 2

您需要在结尾处指定值，您只能获得不足的值。您只是在函数末尾缺少document.getElementById("bg-change1").setAttribute("class",y);。

＆＃13;

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);
 }

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

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

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

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

Answer 4

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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);

执行此操作

示例：

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>

尝试用JS切换背景颜色

6 个答案: