JavaScript添加class样式类代码
分类：实例代码
JavaScript添加class样式类代码属于前端实例代码，有关更多实例代码大家可以查看。
分享一段代码实例，它实现了为指定元素添加class样式类功能。
使用className属性即可实现，关于此属性的用法可以参阅js className属性详解一章节。
先看一段代码实例：
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style>
div{
width:200px;
height:100px;
background:#ccc;
}
.antzone{
line-height:100px;
text-align:center;
color:red;
}
</style>
<script>
window.onload=function(){
var odiv=document.getElementsByTagName("div")[0];
var obt=document.getElementById("bt");
obt.onclick=function(){
odiv.className="antzone";
}
}
</script>
</head>
<body>
<div>前端教程网</div>
<input type="button" id="bt" value="查看演示"/>
</body>
</html>
代码如果原本div元素就有class样式类，这样设置的话，就会将原来的覆盖，代码修改如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style>
div{
width:200px;
height:100px;
background:#ccc;
}
.antzone{
line-height:100px;
text-align:center;
color:red;
}
.a{
border:2px solid blue;
}
</style>
<script>
window.onload=function(){
var odiv=document.getElementsByTagName("div")[0];
var obt=document.getElementById("bt");
obt.onclick=function(){
var cls=odiv.className;
odiv.className=cls+" antzone";
}
}
</script>
</head>
<body>
<div class="a">前端教程网</div>
<input type="button" id="bt" value="查看演示"/>
</body>
</html>
JavaScript添加class样式类代码，这样的场景在实际项目中还是用的比较多的，关于JavaScript添加class样式类代码就介绍到这了。