您的位置:首页> 实例代码> JS实例

classList与className区别

2018-11-22 16:56| 作者: admin| 查看: 1190| 评论: 0|来自: 蚂蚁部落

HTML中绝大多数元素都具有class属性。

代码片段如下:

[HTML] 纯文本查看 复制代码
<div class="a">蚂蚁部落</div>

利用此属性可以为元素设置指定的CSS样式。

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

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

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

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

下面通过代码实例介绍一下两者的区别,关于它们具体用法参阅如下两篇文章:

(1).className参阅JavaScript className一章节。

(2).classList参阅JavaScript classList一章节。

一.浏览器兼容问题:

(1).className:

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

(2).classList:

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

二.操作元素class属性:

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

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

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<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");
  obt.onclick = function () {
    console.log(odiv.className);
    console.log(odiv.classList);
  }
}
</script> 
</head> 
<body> 
<div id="ant" class="a b">蚂蚁部落</div>
<input type="button" id="bt" value="查看效果"/>
</body> 
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201811/22/165718zcb22icoo8wa8c3t.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

代码分析如下:

(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.softwhy.com/" />
<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"的功能。

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201811/22/165748jytmiszx9q19gox6.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

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

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

集合还具有其他方法,分别如下:

(1).add():添加样式类。

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

(3).remove():删除指定样式类。

(4).toggle():切换样式类。

上述方法的具体用法可以参阅JavaScript classList一章节。

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

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


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部