classList与className 区别

小灰灰 2020-06-01 16:23 973阅读 0赞

# classList与className 区别

HTML中绝大多数元素都具有 class 属性，利用它可以设置 CSS 样式类。

代码片段如下：

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

JavaScript 可以通过 className 属性动态获取或者设置元素的 class 属性值。

进而达到动态设置元素外观的功能，由于class是JavaScript中的关键字。

所以没有使用class作为dom对象属性，而是使用className替代。

HTML5新增classList属性，同样可以操作元素class属性。

**一.浏览器兼容问题：**

（1）.className：

这是className主要优势，所有浏览器都支持className属性。

（2）.classList：

此属性HTML5新增，对IE浏览器并不友好，IE10+与其他主流浏览器支持此属性。

**二.操作元素class属性：**

className属性返回值是一个字符串，内容就是HTML元素的class属性内容。

classList属性返回一个包含指定元素所有样式类的集合对象。

代码实例如下：

代码运行效果截图如下：

![](/images/1591028559828.png)

代码分析如下：

（1）.className的返回值就是包含元素class属性值的字符串。

（2）.classList返回值是DOMTokenList类型集合，通过此集合可以非常便利的操作元素class属性。

上述两个特点决定了它们操作的便利性不在一个等级。

通过className操作class属性，本质是对字符串的操作，比如判断class是否具有样式类"b"。

那么需要自己写代码，将返回的字符串分解为各个样式类，然后再进行判断，相对比较麻烦。

如果利用classList属性，那么将是非常轻松愉快的事情，使用DOMTokenList集合的contains方法即可实现。

代码演示如下：

```html
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.dandelioncloud.cn/" />
<title>蒲公英云</title>
<style type="text/css">
div{
  width:100px;
  height:100px;
  border:10px solid red;
}
.a{background-color:#ccc;}
.b{color:green;}
</style>
<script> 
window.onload=function(){
  let obt=document.getElementById("bt");
  let odiv = document.getElementById("ant");
 
  String.prototype.trim=function(){ 
    return this.replace(/(^\s*)|(\s*$)/g,""); 
  } 
  Array.prototype.removeByValue = function(val) {
    let arr=[];
    for(let i=0; i<this.length; i++) {
      if(this[i] != val) {
        arr.push(this[i]);
      }
    }
    return arr;
  }
  function contains(arr,content) {
    let i=arr.length;
    while(i--) {
      if (arr[i]===content) {
        return true;
      }   
    }   
    return false;
  }
 
  obt.onclick = function () {
    let str = odiv.className.trim();
    let arr=str.split(" ");
    let classaArr=arr.removeByValue("");
    console.log(contains(classaArr,"b"));
     
    let list=odiv.classList;
    console.log(list.contains("b"));
  }
}
</script> 
</head> 
<body> 
<div id="ant" class="a b">蒲公英云</div>
<input type="button" id="bt" value="查看效果"/>
</body> 
</html>
```

利用className与classList都实现了判断是否具有"b"的功能。

代码运行效果截图如下：

![](/images/1591028542305.png)

但是两者的便利性简直天壤之别，操作字符串需要自己实现大量功能。

而利用classList返回的集合对象，只需要一个contains方法即可。

集合还具有其他方法，分别如下：

（1）.add()：添加样式类。

（2）.item()：返回指定索引的样式类。

（3）.remove()：删除指定样式类。

（4）.toggle()：切换样式类。

相信看了上述介绍，会对两个属性的区别有了比较详尽了解。

classList更加方便，但是兼容性问题很大，当前暂时推荐使用className。