HTML5中新增的classList与以往我们熟悉的className有很大的区别,虽说他们都是用来操作class的。我们要修改或清空class时,我们通常用className来完成。但是如果你了解过性能方面的问题也许你会知道这并不是很好的做法。假设有一个元素的类名为'div div2' ,你想把它变为'div'。
那么你也许会用: 元素.className='div'
但是HTML5中提供了另一种属性(classList)它可以更好的操作类。
add(value):添加名为value的类 例:div.classList.add('div')
remove(value):删除名为value的类 例:div.classList.remove('div') //注意!这里不是删除特性,而是只清空值
contains(value):列表中是否有名为value的类,有true,没有则false 例:div.classList.contains('div')
toggle(value):如果有名为value的类,删除它;没有则添加 例:div.classList.toggle('div')
还有两点需要注意:
1. div.classList.remove('a b'); //包含多个类名这样是无法删除的,包括add添加也是没办法添加的
2. <div id="a" class="a"></div> //如果原先已经有了a那么他会在后面继续添加
浙公网安备 33010602011771号