切换类

---

使用 JavaScript 在元素中添加和删除类名之间切换。

---

切换类 点击按钮切换类名！

---

切换类

步骤 1) 添加 HTML:

在将类名添加到 id="myDIV" 的 div 元素之间切换（在本例中，我们使用一个按钮来切换类名）。

实例

<button onclick="myFunction()">Try it</button>

<div id="myDIV">
  This is a DIV element.
</div>

---

步骤 2) 添加 CSS:

添加一个类名来切换:

实例

.mystyle {
  width: 100%;
  padding: 25px;
  background-color: coral;
  color: white;
  font-size: 25px;
}

---

---

步骤 3) 添加 JavaScript:

获取 id="myDIV" 的 <div> 元素并在"mystyle"类之间切换:

实例

function myFunction() {
  var element = document.getElementById("myDIV");
  element.classList.toggle("mystyle");
} 亲自试一试 »

---

跨浏览器解决方案

注释: Internet Explorer 9 不支持 classList 属性。以下示例使用 IE9 的跨浏览器解决方案/回退代码:

实例

var element = document.getElementById("myDIV");

if (element.classList) {
  element.classList.toggle("mystyle");
} else {
  // For IE9
  var classes = element.className.split(" ");
  var i = classes.indexOf("mystyle");

  if (i >= 0)
    classes.splice(i, 1);
  else
    classes.push("mystyle");
    element.className = classes.join(" ");
} 亲自试一试 »

提示:另请参阅如何添加类。

提示:另请参阅如何删除类。

提示:在我们的 JavaScript 参考中详细了解 classList 属性。