文章作者：5oftSky

文章来源：https://blog.csdn.net/sky_jser/article/details/8108098

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的切换

1. 对于某个节点上是否存在某个className的判断方法hasClassName()：

    dom.hasClassName = function(node, classname) {
        var cn = node.className;
        if(classname && node.classList && node.classList.contains){    //浏览器特性判断是否支持classList及对应的contains方法
            return node.classList.contains(classname);
        }else{	//对于不支持classList及对应的contains方法使用indexOf进行字符窜匹配
            if( (' '+cn+' ').indexOf(' '+classname+' ')===-1 ){
               return false;
            }else{
                return true;
            }
        }
     };

2. 移除某个节点上指定的className，removeClassName()：

    dom.removeClassName = function (node, _className){
        var obj = node;
        if(_className && obj && obj.classList && obj.classList.remove){//浏览器特性判断是否支持classList及对应的remove方法
            obj.classList.remove(_className);
        }else{
            obj.className = obj.className.replace(new RegExp("\\b" + _className + "\\b"), "");
       	}
     };

    dom.addClassName = function(node, className) {
        var cn = node.className;
        if(className && node && node.classList && node.classList.add){//浏览器特性判断是否支持classList及对应的add方法
            node.classList.add(className);
        }else{
            if( (' '+cn+' ').indexOf(' '+className+' ')===-1 ){
                node.className = cn+' '+className;
            }
        }
    };

    dom.toggle = function(node,className){
        node = $E(node) || node;
        var classList = node.classList;
        if(typeof className === "undefined" || className === ""){//当没有传递className参数时，做hidden和show的切换
            if(node.style.display !== 'none'){
                node.style.display = 'none';
            }else{
                node.style.display = '';
            }
            return;
        }
        if(classList && classList.toggle){//传递了className参数时做浏览器特性判断，判断是否支持classList及对应的toggle方法
            node.classList.toggle(className);
        }else{
            if(dom.hasClassName(node,className)){
                dom.removeClassName(node,className);
            }else{
                dom.addClassName(node,className);
            }
        }
    };

网站文章部分来源于网络，转载请注明原出处。
文章站内地址：人人营养网 » element.classList属性及方法应用