HTML5实战与剖析之classList属性
2020-12-13 14:42
通过上面的方法可以看出，要实现一个简单的删除功能要写好几行代码，若不想写好几行代码就得引入一个库用库中的方法才可以。有了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代码
-
view sourceprint?
1.divclass="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
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。