JavaScript 删除class属性

最新推荐文章于 2023-12-29 16:58:34 发布

qq_39355295

最新推荐文章于 2023-12-29 16:58:34 发布

阅读量2.4w

点赞数 11

分类专栏： Javascript

Javascript 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

本文介绍一下利用JavaScript删除元素的class属性。
考虑范围更广一些，可以包括如下两个操作：
（1）.删除class属性。
（2）.删除class属性值中的某一个类。
一.删除class属性：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript 删除class属性</title>
<style>
#ant{
  width:120px;
  height:50px;
  background-color:#ccc;
}
.a{color:red;}
</style>    
<script>
window.function(){
  let odiv=document.getElementById("ant");
  let obt=document.getElementById("bt");
  obt.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">
<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.function(){
  let odiv=document.getElementById("ant");
  let obt=document.getElementById("bt");
  obt.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方法传递多个参数即可，用逗号分隔。
在这里插入图片描述
3、删除class属性中的某个属性
以tab切换为例：

在写tab切换的时候，通常我们会给选中的tab设置不同的样式，常用的方法是给被选中的tab新增一个class名，然后改这个class名的样式。
比如起一个class名叫“active”
设置样式

.active{
    color: #FFD113 !important;
}

在html代码中给首页（默认选中）加上class名active

<a class="tab_item active">
    <span class="iconfont icon-shouye"></span>
    <span class="tab2">首页</span>
</a>

效果是这样的：
在这里插入图片描述
在点击切换的过程中，我们需要给被选中的子选项添加“active”，然后让其它子选项删除“active”名

其中：根据id名字获得class属性，someClassName指class属性中的一个值，把someClassName重新置为" "，然后重新给id复制class属性。即可实现删除class属性其中的一个值。当然添加和替换是同样的思想方法。

qq_39355295

关注

11
点赞
踩
22

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 删除class属性

本文介绍一下利用JavaScript删除元素的class属性。考虑范围更广一些，可以包括如下两个操作：（1）.删除class属性。（2）.删除class属性值中的某一个类。一.删除class属性：<!doctype html><html><head><meta charset="utf-8"><title>JavaScr...
复制链接

扫一扫