javascript如何删除一个单独的class样式类
本章节介绍一下如何删除一个元素的class样式类。
也许很多朋友认为实现这个操作实在太过于简单的了，设置指定元素的className属性值为空即可。
代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style>
.a{
width:200px;
height:150px;
background-color:#ccc;
text-align:center;
line-height:150px;
}
</style>
<script>
window.onload=function(){
var odiv=document.getElementById("antzone");
var obt=document.getElementById("bt");
obt.onclick=function(){
odiv.className="";
}
}
</script>
</head>
<body>
<div id="antzone" class="a">前端教程网欢迎您</div>
<input type="button" id="bt" value="查看效果"/>
</body>
</html>
确实上面的代码非常的简单，只要将className属性值设置为空即可。
但是有没有朋友想过class属性值也可以是这样的形式class="a b"，如果我们只想删除类b，那么应该如何处理。
代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style>
.a{
width:200px;
height:150px;
background-color:#ccc;
text-align:center;
line-height:150px;
}
.b{
color:red;
}
</style>
<script>
window.onload=function(){
var odiv=document.getElementById("antzone");
var obt=document.getElementById("bt");
obt.onclick=function(){
var classNameValue=odiv.className;
var arr=classNameValue.split(" ");
for(var index=0;index<arr.length;index++){
if(arr[index]=="b"){
arr.splice(index,1);
}
}
odiv.className=arr.join();
}
}
</script>
</head>
<body>
<div id="antzone" class="a b">前端教程网欢迎您</div>
<input type="button" id="bt" value="查看效果"/>
</body>
</html>
上面的代码实现了我们的要求，下面介绍一下它的实现过程。
一.代码注释:
（1）.window.onload=function(){}，当文档内容完全加载完毕再去执行函数中的代码。
（2）.var odiv=document.getElementById("antzone")，获取div元素。
（3）.var obt=document.getElementById("bt")，获取按钮元素。
（4）.obt.onclick=function(){}，为按钮注册click事件处理函数。
（5）.var classNameValue=odiv.className，获取元素的class属性值。
（6）.var arr=classNameValue.split(" ")，将属性值分割成数组。
（7）.for(var index=0;index<arr.length;index++){},遍历数组中的每一个元素。
（8）.if(arr[index]=="b"){
arr.splice(index,1);
}，如果当前索引值对应的数组元素值等于b，那么就删除此值。
（9）.odiv.className=arr.join()，将数组值连接起来并赋值给className属性。
二.相关阅读:
（1）.className属性可以参阅js className属性一章节。
（2）.split()方法可以参阅javascript split()一章节。
（3）.splice()方法可以参阅javascript 数组 splice()一章节。