您的位置：首页 > Web前端 > HTML5

HTML5实战与剖析之classList属性

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

　　HTML代码

viewsource

print?

1.
<
div
class
=
"limenglong"
>梦龙小站</
div
>


　　JavaScript代码

viewsource

print?

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代码

viewsource

print?

1.
<
div
class
=
"limenglong"
>梦龙小站</
div
>


　　JavaScript代码

viewsource

print?

1.
//获取要删除类名meng的div

2.
var
div=document.getElementsByTagName(
"div"
)[0];

3.

4.
alert(div.classList)
//limenglong

5.

6.
div.classList.remove(
"meng"
)

7.

8.
alert(
"div.className:"
+div.className)
//div.className:lilong


　　预览效果



　　2、contains(value)

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

　　HTML代码

viewsource

print?

1.
<
div
class
=
"limenglong"
>梦龙小站</
div
>


　　JavaScript代码

viewsource

print?

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
=
"limenglong"
>梦龙小站</
div
>


　　JavaScript代码

viewsource

print?

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:limenglongmenglong


　　预览效果



　　4、toggle(value)

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

　　HTML代码



<
div
class
=
"limenglong"
>梦龙小站</
div
>

<
div
class
=
"lilong"
>梦龙小站</
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:lilong

alert(
"div[1].className:"
+div[1].className)
//div[1].className:limenglong


　　预览效果



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

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航