element.classList屬性及方法應用

element.classList屬性用於返回一個元素的className集合，而且該屬性擁有add，remove，toggle，contains方法，詳見：https://developer.mozilla.org/en-US/docs/DOM/element.classList。

通常咱們再操做dom節點的className時常常會有如下4個需求：

1. 判斷該節點是否存在某個className
2. 移除某個節點上的指定className
3. 爲某個節點添加指定的className
4. 在某個節點上進行指定的兩個或多個className的切換

對於以上4個功能需求咱們之前的作法通常是利用正則表達式進行匹配，匹配成功後進行替換，移除等操做，但目前對於firefox3.六、chrome8等高級瀏覽器已經支持element.classList屬性及相應方法，因此能夠改進以上4種需求的實現。

1. 對於某個節點上是否存在某個className的判斷方法hasClassName()：

 

1. dom.hasClassName = function(node, classname) {
2. var cn = node.className;
3. if(classname && node.classList && node.classList.contains){ //瀏覽器特性判斷是否支持classList及對應的contains方法
4. return node.classList.contains(classname);
5. } else{ //對於不支持classList及對應的contains方法使用indexOf進行字符竄匹配
6. if( (' '+cn+' ').indexOf(' '+classname+' ')===-1 ){
7. return false;
8. } else{
9. return true;
10. }
11. }
12. };

 

2. 移除某個節點上指定的className，removeClassName()：

 

1. dom.removeClassName = function (node, _className){
2. var obj = node;
3. if(_className && obj && obj.classList && obj.classList.remove){//瀏覽器特性判斷是否支持classList及對應的remove方法
4. obj.classList.remove(_className);
5. } else{
6. obj.className = obj.className.replace( new RegExp("\\b" + _className + "\\b"), "");
7. }
8. };

3.爲某個節點添加指定的className

 

 

1. dom.addClassName = function(node, className) {
2. var cn = node.className;
3. if(className && node && node.classList && node.classList.add){//瀏覽器特性判斷是否支持classList及對應的add方法
4. node.classList.add(className);
5. } else{
6. if( (' '+cn+' ').indexOf(' '+className+' ')===-1 ){
7. node.className = cn+ ' '+className;
8. }
9. }
10. };

4.在某個節點上進行指定的兩個或多個className的切換

 

1. dom.toggle = function(node,className){
2. node = $E(node) || node;
3. var classList = node.classList;
4. if(typeof className === "undefined" || className === ""){//當沒有傳遞className參數時，作hidden和show的切換
5. if(node.style.display !== 'none'){
6. node.style.display = 'none';
7. } else{
8. node.style.display = '';
9. }
10. return;
11. }
12. if(classList && classList.toggle){//傳遞了className參數時作瀏覽器特性判斷，判斷是否支持classList及對應的toggle方法
13. node.classList.toggle(className);
14. } else{
15. if(dom.hasClassName(node,className)){
16. dom.removeClassName(node,className);
17. } else{
18. dom.addClassName(node,className);
19. }
20. }
21. };

 

轉自https://blog.csdn.net/sky_jser/article/details/8108098