首页 >web前端 >H5教程 > HTML5中classList属性

HTML5中classList属性

巴扎黑
巴扎黑原创
2017-03-19 11:56:101913浏览

[导读] 前面为大家介绍了一些有关HTML5新添加的选择器,分别是querySelector(),querySelectorAll()和getElementsByClassName()。这三个都有自己独特的功能,大家有需要的话可以看HTML5实战与剖析中的相关内容。今天为大

前面为大家介绍了一些有关HTML5新添加的选择器,分别是querySelector(),querySelectorAll()和getElementsByClassName()。这三个都有自己独特的功能,大家有需要的话可以看HTML5实战与剖析中的相关内容。今天为大家介绍classList属性。

  classList属性究竟是干什么的,我们先撇下classList不管。我们考虑这么一个问题,那就是我们如何将拥有多个类名的元素中的其中一个类名删除呢?梦龙较劲脑汁儿终于想到一个实现的方法。将拥有类名li、meng和long,三个类名中的类名meng删除。代码如下

  HTML代码 

  1. <p class="li meng long">梦龙小站</p>

  JavaScript代码

//获取要删除类名meng的p  
var p = document.getElementsByTagName("p")[0];  
  
//获取类名字符串并拆分成数组  
var allClassName = p.className.split(" ");  
  
//找到要删除的类名  
var i, len,   
    pos = -1;  
  
for(i=0, len = allClassName.length; i < len; i++){  
    if(allClassName[i] == "meng"){  
        pos = i;  
        break;  
    }  
}  
  
//删除类名  
allClassName.splice(pos, 1);  
  
alert(allClassName) //li,long  
  
//将其余的类名拼成字符串并重新添加到元素的类名中  
p.className = allClassName.join(" ");

 

  预览效果

 

HTML5实战与剖析之classList属性

 

 

  为了从的元素类名中删除”meng”,上面这些代码都是必须的。通过类似的算法替换类名并确认元素中是否包含该类名。若是添加类名可以通过拼接字符串完成,但是必须通过检测确定不会多次添加相同的类名,很多JavaScript库都是实现了这个方法,简化操作。而删除类名则是先要获取已经有的类名,找到要删除类名的位置,然后进行删除。

  通过上面的方法可以看出,要实现一个简单的删除功能要写好几行代码,若不想写好几行代码就得引入一个库用库中的方法才可以。有了HTML5就不用那么麻烦了,我们可以用HTML5中的classList属性来完成这些步骤。这个classList属性是新集合类型DOMTokenList的实例。与其他DOM集合类似。DOMTokenList有一个表示自己包含多少元素的length属性,而要取得每个元素可以使用item()方法也可以使用方括号语法。此外,下面是给这个新类型定义的方法。

 

  1、remove(value)

 

  remove(value)方法表示从列表中删除给定的字符串。小例子如下:

 

  HTML代码

<p class="li meng long">梦龙小站</p>

  JavaScript代码 

//获取要删除类名meng的p  
var p = document.getElementsByTagName("p")[0];  
  
alert(p.classList)  //li meng long  
  
p.classList.remove("meng")   
  
alert("p.className: " + p.className)  //p.className: li long

  预览效果

 

HTML5实战与剖析之classList属性

 

  2、contains(value)

 

  contains(value)方法表示列表中是否存在给定的值,如果存在就返回”true”,否则返回”false”小例子如下:

 

  HTML代码

  1. <p class="li meng long">梦龙小站</p>

 

  JavaScript代码
 

//获取要删除类名meng的p  
var p = document.getElementsByTagName("p")[0];  
  
alert(p.classList.contains("meng")) //true  
  
alert(p.classList.contains("menglong")) //false

  3、add(value)

  add(value)方法表示列表中的字符串添加到列表中。如果已经存在就不添加了。小例子如下: 

  HTML代码

<p class="li meng long">梦龙小站</p>

  JavaScript代码

//添加类名 menglong  
  
//获取要删除类名meng的p  
var p = document.getElementsByTagName("p")[0];  
  
p.classList.add("menglong");  
  
alert("p.className: " + p.className)  //p.className: li meng long menglong

 

  预览效果

 

HTML5实战与剖析之classList属性

 

  4、toggle(value)

 

  toggle(value)方法,如果列表中已经存在给定的值,删除它;如果列表中没有给定的值,添加它。小例子如下:

 

  HTML代码

<p class="li meng long">梦龙小站</p>  

梦龙小站

  JavaScript代码

//切换类名 meng  
  
//获取要删除类名li的p  
var p = document.getElementsByTagName("p");  
var i, len;  
  
for(i=0, len = p.length; i< len; i++){  
    p[i].classList.toggle("meng");  
}  
  
  
alert("p[0].className: " + p[0].className)  //p[0].className: li long  
alert("p[1].className: " + p[1].className)  //p[1].className: li meng long

 

  预览效果

 

HTML5实战与剖析之classList属性

 

 

  有关classList的小例子们已经为大家呈现了,通过小例子就能把这些小方法展现和解释清楚了。有了classList,除非你需要全部删除所有类名,或者完全重写元素的class属性,否则用不到className属性了,而且还附加很多实用的方法。支持classList属性的浏览器有Firefox 3.6+ 和Chrome。

  HTML5实战与剖析之classList属性就为大家介绍到这里了,点滴的积累就是明天的成功,一天学点HTML5,有一天一定能成功学会的。感谢大家支持梦龙小站,更多有关HTML5的更新敬请关注梦龙小站关于HTML5实战与剖析的更新。

以上是 HTML5中classList属性的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn