添加一个类

---

了解如何使用 JavaScript 为元素添加类名。

---

Add Class 点击按钮添加类！

---

添加类

步骤 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.add("mystyle");
} 亲自试一试 »

---

跨浏览器解决方案

注释: Internet Explorer 9 不支持 classList 属性。以下代码适用于所有浏览器:

实例

function myFunction() {
  var element, name, arr;
  element = document.getElementById("myDIV");
  name = "mystyle";
  arr = element.className.split(" ");
  if (arr.indexOf(name) == -1) {
    element.className += " " + name;
  }
} 亲自试一试 »

提示:另请参阅如何切换类。

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

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

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