JavaScript className

小灰灰 2020-06-01 16:27 761阅读 0赞

# JavaScript className

className是当前（2018-11）最为常用的属性之一。

利用它可以操作DOM元素的class属性，从而实现设置元素CSS样式等功能。

之所以说它是当前最为常用的属性，是因为在可以预测的将来，很有可能被classList取代。

因为classList对元素class属性操作更为方便，HTML5新增，所以当前有很大兼容性问题。

className属性可以设置或者返回元素的class属性值，下面将结合代码实例详细做一下介绍。

语法结构：

```html
elem.className=classname
```

通常情况下，HTML元素属性与获取它们的DOM元素对象属性是一致的

比如要获取id属性值，使用dom.id即可，但class是JavaScript中的关键字，使用className作为名称。

**浏览器支持:**

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

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

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

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

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

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

**代码实例:**

代码运行效果截图如下：

![](/images/1591028825982.png)

点击按钮可以将对应元素的class属性值写入div中。

大家知道，通过class属性可以一次性设置多个样式类。

代码片段如下：

```html
<div class=" a   b c"></div>
```

代码实例如下：

```html
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.dandelioncloud.cn/" />
<title>蒲公英云</title>
<style type="text/css">
.set{
  width:100px;
  height:100px;
  line-height:100px;
  border:10px solid red;
  text-align:center;
}
</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;
  }
  obt.onclick = function () {
    let str = odiv.className.trim();
    let arr=str.split(" ");
    console.log(arr.removeByValue(""))
  }
}
</script> 
</head> 
<body> 
<div id="ant" class=" a  b c"></div>
<input type="button" id="bt" value="查看演示"/>
</body> 
</html>
```

代码运行效果截图如下：

![](/images/1591028806672.png)

代码分析如下：

（1）.点击按钮后返回一个数组，数组中存放着class属性规定的各个类名。

（2）.有时候class属性值写的比较随意，前后有空格，或者类名之间有多个空格分隔，但是语法上是允许的。

（3）.所以自定义trim方法删除字符串两端空格。

（3）.自定义removeByValue方法删除数组中的空元素。

可以看到className对于样式类的操作相对较为麻烦，因为它返回一个字符串，实质上是对字符串的操作，而classList返回的是集合，通过内置的方法操作集合更为便利简单。

特别说明：ES5新增trim方法可以删除字符两端空格。

```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 addBt=document.getElementById("add");
  let delBt=document.getElementById("del");
  let odiv = document.getElementById("ant");
     
  addBt.onclick = function () {
    odiv.className = "a"
  }
  delBt.onclick = function () {
    odiv.className = "b"
  }
}
</script> 
</head> 
<body> 
<div id="ant">蒲公英云</div>
<input type="button" id="add" value="背景色"/>
<input type="button" id="del" value="字体颜色"/>
</body> 
</html>
```

点击按钮可以分别设置元素背景颜色和字体颜色。

代码分析如下：

（1）.className属性是重置class属性值，而不是追加class属性值，并非增量操作。

（2）.作为className属性值的类名前面不要加点（.）。

通过className属性可以为元素一次性设置多个样式类。

样式类之间用空格分隔，要求比较宽松，前后左右都允许有空格，且数量不限。