HTML5 classList使用

html5新增api,类似于jquery的 addclass、toggleClass、removeClass方法

add:给元素添加一个指定的class

var test = document.getElementById('test');  
test.classList.add('yellow');//添加一个class
test.classList.add('yellow','blue');//添加多个class

remove:从元素中删除一个指定的class

var test = document.getElementById('test');  
test.classList.remove('red'); 

toggle:如果元素没有指定的class则执行add操作|反之执行remove操作

var test = document.getElementById('test');  
test.classList.toggle('yellow')//切换class
test.classList.toggle("visible", i < 10 );//切换visible类取决于第二个参数的条件

contains:检测元素是否含有指定的class

var test = document.getElementById('test');  
test.classList.contains('red');   //return true | false

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>