如何创建 - 添加一个类
了解如何使用 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.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 属性。
