本文介绍一下利用JavaScript删除元素的class属性。
考虑范围更广一些,可以包括如下两个操作:
(1).删除class属性。
(2).删除class属性值中的某一个类。
一.删除class属性:
此操作非常的粗暴简单,代码实例如下:
   [ 其他 ] 运行代码    下载代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.51qianduan.com/" />
<title>JavaScript 删除class属性</title>
<style>
#ant{
  width:120px;
  height:50px;
  background-color:#ccc;
  text-align:center;
}
.a{color:red;}
</style>    
<script>
window.onload=function(){
  let odiv=document.getElementById("ant");
  let obt=document.getElementById("bt");
  obt.onclick=function(){
    odiv.removeAttribute("class");
  }
}
</script>
</head>
<body>
  <div id="ant" class="a">51前端</div>
  <input type="button" id="bt" value="查看效果"/>
</body>
</html>
点击按钮可以删除div的class属性可以看到,元素的class属性已经被彻底删除。
二.删除class属性值中的指定类:
假设div元素的class属性值为"a b",下面要删除b。
代码实例如下:
   [ 其他 ] 运行代码    下载代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.51qianduan.com/" />
<title>JavaScript 删除class属性</title>
<style>
#ant{
  width:120px;
  height:50px;
  background-color:#ccc;
  text-align:center;
}
.a{color:red;}
.b{line-height:50px;}
</style>    
<script>
window.onload=function(){
  let odiv=document.getElementById("ant");
  let obt=document.getElementById("bt");
  obt.onclick=function(){
    odiv.classList.remove("b");
  }
}
</script>
</head>
<body>
  <div id="ant" class="a b">51前端</div>
  <input type="button" id="bt" value="查看效果"/>
</body>
</html>
点击按钮可以删除样式类"b"。
如果要删除多个样式类,为remove方法传递多个参数即可,用逗号分隔。

代码描述:JavaScript 删除class属性,JavaScript 删除class属性



60 79



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: js js代码 js实例 javascript javascript代码 javascript实例 基础js 基础javajcript
×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到