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