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()一章节。

javascript如何删除一个单独的class样式类

回复

我来回复
  • 暂无回复内容