如何添加类

学习如何使用 JavaScript 将类名添加到元素。

单击按钮为我添加类!

添加类

第一步 - 添加 HTML:

将类名添加到 id="myDIV" 的 div 元素(在本例中,我们使用按钮来添加类)。

<button onclick="myFunction()">试一试</button>

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

第二步 - 添加 CSS:

设置指定类名的样式:

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

第三步 - 添加 JavaScript:

获取 id="myDIV" 的 <div> 元素,并向其添加 "mystyle" 类:

function myFunction() {
  var element = document.getElementById("myDIV");
  element.classList.add("mystyle");
}

亲自试一试

相关页面

教程:如何切换类

教程:如何删除类

参考手册:HTML DOM Element classList 属性

参考手册:HTML DOM Element className 属性