HTML5: element.classList API

Posted by 任平生 on June 10, 2011

element.classList 将会返回 element 的 class 信息

{  
	length: {number},  
	add: function(){},  
	remove: function(){},  
	toogle: function(){},  
	item: function(){},  
	contanis: function(){}  
}  
<div class="c1 c2 c3" id="ele"></div>  
var ele =document.getElementById('ele');  
ele.classList.add('c4');  
ele.classList.remove('c2');  
ele.classList.toggle('c3'); //移除 c3  
ele.classList.toggle('c3'); //添加 c3  
ele.classList.contains('c1') // true  
ele.classList.contains('c5') // false    
ele.classList.contains.itme(0) // c1  

使用 toggle 时候,如果class不存在,则增加这个class

检测浏览器是否支持 classList:

'classList' in document.createElement('a') // true 为支持  

浏览器支持状况:
Chrome 8+, Firefox 3.6+, Opera 11.5+ , IE 和 Safria 不支持

参考链接:
http://davidwalsh.name/classlist
https://developer.mozilla.org/en/DOM/element.classList