JavaScript classList 属性

小灰灰 2020-06-02 14:08 807阅读 0赞

# JavaScript classList 属性

classList 属性可以获取应用于指定元素上的样式类集合，HTML5新增。

通过 HTML 元素的 class 属性可以设置样式类。

代码片段如下：

```html
<div class="a">蒲公英云</div>
```

classList属性可以获取class的属性值"a"，返回值是一个只包含一个元素的集合。

为什么说返回值是一个集合呢，因为HTML元素的class属性值可以包含多个样式类。

代码片段如下：

```html
<div class="a b c">蒲公英云</div>
```

上述代码为div元素应用了三个class样式类。

语法结构：

```javascript
element.classList
```

HTML5 之前可以使用 className 实现相同的功能，但不如 classList 方便。

**浏览器兼容性：**

（1）.IE10+ 浏览器支持此属性。

（2）.edge 浏览器支持此属性。

（3）.谷歌浏览器支持此属性。

（4）.火狐浏览器支持此属性。

（5）.opera 浏览器支持此属性。

（6）.safari 浏览器支持此属性。

**代码实例：**

```html
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="https://www.dandelioncloud.cn/" />  
<title>蒲公英云</title> 
<style>
.a{
  width:150px;
  height:60px;
} 
.b{
  text-align:center;
  line-height:60px;
}
.c{
  background-color:#ccc;
  color:red;
}
</style> 
<script>
window.onload=function(){
  let odiv=document.getElementById("ant");
  console.log(odiv.classList);
}
</script>  
</head>  
<body>  
<div id="ant" class="a b c">蒲公英云</div>
</body>  
</html>
```

代码运行效果截图如下：

![](/images/1591106843319.png)

代码分析如下：

（1）.通过class属性为div元素设置了三个样式类。

（2）.classList属性返回一个集合，此集合具有三个元素，分别是class属性设置的三个样式类名。

（3）.集合length属性返回集合元素的数量。

（4）.集合value属性返回元素class属性值。

（5）.集合还具有其他方法，下面将通过代码实例做介绍。

**一.add方法：**

此方法可以为当前元素添加一个指定的class样式类。

代码实例如下：

```html
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.dandelioncloud.cn/" />  
<title>蒲公英云</title> 
<style>
.a{
  width:150px;
  height:60px;
} 
.b{
  text-align:center;
  line-height:60px;
}
.c{
  background-color:#ccc;
  color:red;
}
</style> 
<script>
window.onload=function(){
  let odiv=document.getElementById("ant");
  let obt=document.getElementById("bt");
  obt.onclick=function(){
    odiv.classList.add("c");
  }
}
</script>  
</head>  
<body>  
<div id="ant" class="a b">蒲公英云</div>
<input type="button" id="bt" value="查看效果"/>
</body>  
</html>
```

点击按钮之后，可以为div元素添加class样式类"c"。

可以看到div元素class属性值已经增加了"c"。

**二.contains方法：**

此方法可以判断指定元素是否具有指定名称的class样式类。

代码实例如下：

```html
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.dandelioncloud.cn/" />  
<title>蒲公英云</title> 
<style>
.a{
  width:150px;
  height:60px;
} 
.b{
  text-align:center;
  line-height:60px;
}
.c{
  background-color:#ccc;
  color:red;
}
</style> 
<script>
window.onload=function(){
  let odiv=document.getElementById("ant");
  let obt=document.getElementById("bt");
  console.log(odiv.classList.contains("b"));
  console.log(odiv.classList.contains("c"));
}
</script>  
</head>  
<body>  
<div id="ant" class="a b">蒲公英云</div>
</body>  
</html>
```

控制台打印效果截图如下：

![](/images/1591106824093.png)

如果具有指定的样式类，那么方法返回true，否则返回false。

**三.item方法：**

此方法可以获取集合中指定位置class样式类名称。

参数是一个数字，表示样式类名称在集合中的位置，从0开始计算。

代码实例如下：

```html
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.dandelioncloud.cn/" />  
<title>蒲公英云</title> 
<style>
.a{
  width:150px;
  height:60px;
} 
.b{
  text-align:center;
  line-height:60px;
}
.c{
  background-color:#ccc;
  color:red;
}
</style> 
<script>
window.onload=function(){
  let odiv=document.getElementById("ant");
  let obt=document.getElementById("bt");
  console.log(odiv.classList.item(1));
}
</script>  
</head>  
<body>  
<div id="ant" class="a b">蒲公英云</div>
</body>  
</html>
```

代码运行效果截图如下：

![](/images/1591106807963.png)

索引为值从0开始计算，那么上述代码可以获取集合中第二个样式类的名称。

集合中类名的顺序按照HTML元素class属性值规定的类名从左到右计算。

**四.remove方法：**

此方法可以删除一个或者多个指定的样式类。

参数是要移除的类名，代码实例如下：

```html
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.dandelioncloud.cn/" />  
<title>蒲公英云</title> 
<style>
.a{
  width:150px;
  height:60px;
} 
.b{
  text-align:center;
  line-height:60px;
}
.c{
  background-color:#ccc;
  color:red;
}
</style> 
<script>
window.onload=function(){
  let odiv=document.getElementById("ant");
  let obt=document.getElementById("bt");
  obt.onclick=function(){
    odiv.classList.remove("a","b");
  }
}
</script>  
</head>  
<body>  
<div id="ant" class="a b c">蒲公英云</div>
<input type="button" id="bt" value="查看效果"/>
</body>  
</html>
```

点击按钮可以删除样式类"a"和"b"，

可以看到样式类"a"与"b"已经被删除。