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

  HTML代码

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

  JavaScript代码

01.//获取要删除类名meng的div 
02.var div = document.getElementsByTagName("div")[0]; 
03. 
04.//获取类名字符串并拆分成数组 
05.var allClassName = div.className.split(" "); 
06. 
07.//找到要删除的类名 
08.var i, len,  
09.pos = -1; 
10. 
11.for(i=0, len = allClassName.length; i < len; i++){ 
12.if(allClassName[i] == "meng"){ 
13.pos = i; 
14.break
15.
16.
17. 
18.//删除类名 
19.allClassName.splice(pos, 1); 
20. 
21.alert(allClassName) //li,long 
22. 
23.//将其余的类名拼成字符串并重新添加到元素的类名中 
24.div.className = allClassName.join(" "); 

  预览效果

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

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

   1、remove(value) 

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

  HTML代码

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

  JavaScript代码

1.//获取要删除类名meng的div 
2.var div = document.getElementsByTagName("div")[0]; 
3. 
4.alert(div.classList)  //li meng long 
5. 
6.div.classList.remove("meng")  
7. 
8.alert("div.className: " + div.className)  //div.className: li long 

  预览效果

  2、contains(value) 

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

  HTML代码

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

  JavaScript代码

1.//获取要删除类名meng的div 
2.var div = document.getElementsByTagName("div")[0]; 
3. 
4.alert(div.classList.contains("meng")) //true 
5. 
6.alert(div.classList.contains("menglong")) //false

  3、add(value) 

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

  HTML代码

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

  JavaScript代码

1.//添加类名 menglong 
2. 
3.//获取要删除类名meng的div 
4.var div = document.getElementsByTagName("div")[0]; 
5. 
6.div.classList.add("menglong"); 
7. 
8.alert("div.className: " + div.className)  //div.className: li meng long menglong

  预览效果

  4、toggle(value) 

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

  HTML代码

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

  JavaScript代码

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

  预览效果

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

HTML5实战与剖析之classList属性的更多相关文章

  1. HTML5实战与剖析之字符集属性(charset和defaultCharset)

    HTML5对字符集属性也进行了更新,其中charset和defaultCharset属性就是HTML5中新添加的字符集属性.有关charset和defaultCharset属性的具体讲解尽在HTML5 ...

  2. HTML5实战与剖析之原生拖拽(四可拖动dragable属性和其他成员)

    可拖动dragable属性 之前我们已经为大家介绍过几篇有关HTML5中原生拖拽的相关知识了.今天为大家介绍HTML5拖拽中的其他一些小东东,闲话不多说赶快一起看看吧. 在默认情况下,链接.文本和图像 ...

  3. HTML5实战与剖析之触摸事件(touchstart、touchmove和touchend)(转)

    HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事件主 ...

  4. (转)HTML5实战与剖析之触摸事件(touchstart、touchmove和touchend)

    HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事件主 ...

  5. HTML5实战与剖析之媒体元素(3、媒体元素的事件及方法)

    HTML5中的媒体元素除了拥有非常多的属性之外,video标签和audio标签还能够出发非常多事件和方法. 这些方法监控着不同的属性的变化,这些变化有可能是媒体播放的结果,也可能是用户操作媒体的结果. ...

  6. HTML5实战与剖析之媒体元素

    随着HTML5的到来,flash在手机端全部不能得到支持,这就使一项以flash制作的音乐播放和视频播放只能用HTML5中的媒体标签video标签和audio标签来制作了.很恰巧的是,移动端对HTML ...

  7. HTML5实战与剖析之原生拖拽(一拖拽历史概述)

    提起拖拽,我就想起了在JavaScript培训的时候一个非常好玩的效果,那就是拖拽了.可以用鼠标任意拖拽着一个物体到任何你想去的地方. 最早拥有JavaScript拖拽功能的是IE4浏览器.当时,网页 ...

  8. HTML5实战与剖析之跨文档消息传递(iframe传递信息)

    在来自不同域名的页面间传递消息一般统称为跨文档消息传送,简称XDM.如,www.leemagnum.com域中的页面与位于一个内嵌框架中的http://blog.csdn.net/lee_magnum ...

  9. HTML5实战与剖析之媒体元素(6、视频实例)

    HTML5中的视频标签和及其模仿视频播放器的效果在一些手机端应用比較多.由于手机端基本上废除了flash的独断.让HTML5当家做主人,所以对视频支持的比較好. 所以今天专门为大家奉上HTML5视频标 ...

随机推荐

  1. nginx配置 的话注意几点 1.错误时注意看log 2.天威证书的话,有文档按照其文档一步步配置即可;3每句话的结尾注意千万别丢掉分号

    nginx配置 的话注意几点 1.错误时注意看log  2.天威证书的话,有文档按照其文档一步步配置即可:3每句话的结尾注意千万别丢掉分号:4.配置https时 其转发可以转发到http上 pass_ ...

  2. #include<string.h>

    #include<string.h> 1 strcpy #include <string.h> char *strcpy(char *str1, const char *str ...

  3. VS2012+SQL2008+ODBC编程,第一篇博客,写的不好忘各位大神指点一二~

    近期写一个数据库的课程设计,用的是C++ MFC .最開始用的是ADO技术,可是苦于网上大部分的教程都是VC6.0的,对着教程敲了4,5遍还是执行不成功.我用的IDE是VS2012,毕竟VC6.0和V ...

  4. [bzoj2301: [HAOI2011]Problem b] 乞讨

    </pre><pre code_snippet_id="507886" snippet_file_name="blog_20141104_2_53831 ...

  5. ARM9嵌入式学习笔记(2)-Vi使用

    ARM9嵌入式学习笔记(2) 实验1-1-3 Vi使用 vi创建文件vi hello.c:vi smb.conf-打开文件smb.conf i键-插入模式:esc键-命令行模式::-底行模式: 底行模 ...

  6. js/css 检测移动设备方向的变化 判断横竖屏幕

    js/css 检测移动设备方向的变化 判断横竖屏幕 方法一:用触发手机的横屏和竖屏之间的切换的事件 window.addEventListener("orientationchange&qu ...

  7. #ifndef #define #endif 防止头文件被重复引用

    想必很多人都看过“头文件中的 #ifndef/#define/#endif 防止该头文件被重复引用”.但是是否能理解“被重复引用”是什么意思?是不能在不同的两个文件中使用include来包含这个头文件 ...

  8. Eclipse代码风格设置

    在编写代码的过程中,代码的呈现形式是通过eclipse的Formatter配置文件所控制的.我们可以按照自己的习惯生成属于自己的代码风格配置文件,方便规范以后的代码编写形式.具体的操作步骤如下所示:( ...

  9. 解决英文版Windows程序乱码

    前段时间由于工作需要装了一个英文版Windows,以至于在一些脚本和控制台程序里面处理汉字的时候总是显示乱码(比如:“???”). 在尝试了很多编码和解码的操作后,乱码问题还是没能很好的解决.后来才发 ...

  10. Python信息采集器使用轻量级关系型数据库SQLite

    1,引言Python自带一个轻量级的关系型数据库SQLite.这一数据库使用SQL语言.SQLite作为后端数据库,可以搭配Python建网站,或者为python网络爬虫存储数据.SQLite还在其它 ...