js设置元素class方法小结及classList相关

Posted 2020-10-09 林木慕风

    给DOM元素设置class是我们在项目中非常容易遇到的，网上的资料和总结也比较多，下面比较全面的整理一下，希望给到大家一些帮助！并引用两种成熟的classList的兼容方法

一、el.setAttribute(‘class‘,‘abc‘); 

var div = document.getElementById(‘d1‘);
div.setAttribute("class", "abc");  

兼容：IE8/9/10/Firefox/Safari/Chrome/Opera支持  IE6/7不支持setAttribute(‘class‘,xxx)方式设置元素的class。 

二、el.setAttribute(‘className‘, ‘abc‘) 

var div = document.getElementById(‘d1‘);
div.setAttribute("className", "abc"); 

兼容：IE6/7支持  IE8/9/10/Firefox/Safari/Chrome/Opera不支持setAttribute(‘className‘,xxx)方式设置元素的class。

三、el.className = ‘abc‘; 

var div = document.getElementById(‘d1‘);
div.className = ‘abc‘;

兼容：所有浏览器都支持。

四、classList属性

html5新增的javascript API，HTML5为每个元素定义了classLlist属性，用于在元素中添加，移除及切换 CSS 类。该属性是 DOMTokenList 对象（一个只读的类数组对象），你可以通过DOMTokenList定义的方法对其进行修改。

1. add( class1, class2, ...)    在元素中添加一个或多个类名（如果指定的类名已存在，则不会添加）用法：`el.classList.add("a", "b", "c");`

2. remove( class1, class2, ...)    删除元素中一个或多个类名用法：el.classList.remove(‘a‘,‘b‘);          

3. toggle(class, true|false)    在元素中切换类名；参数1：要移出或者添加的类名；参数2：可选参数，不论类名是否存在，为true时强制添加类名，false时强制删除类名；用法： 添加：el.classList.toggle("d", true);删除：el.classList.toggle("d", false);           

4. contains( class )    判断指定的类名是否存在；用法：el.classList.contains("e") ，//如果e存在返回true 

5. item(index)    根据索引返回类名，索引从 0 开始，如果没有则返回null；用法：el.classList.item(0) //返回e

6. length属性 var len = document.body.classList.length;

兼容：支持classList属性的浏览器有Firefox 3.6+，ie10+和Chrome。IE9和IE9以前的版本不支持该属性，移动端方面，除了安卓2.3及以下版本的webview不支持，其它浏览器终端都能很好地支持。

       最后，给不支持classList的浏览器（ie9及以下等）总结两种兼容解决方案：

第一种：

1. if (!("classList" in document.documentElement)) {  
2.         Object.defineProperty(HTMLElement.prototype, ‘classList‘, {  
3.             get: function() {  
4.                 var self = this;  
5.                 function update(fn) {  
6.                     return function(value) {  
7.                         var classes = self.className.split(/\s+/g),  
8.                             index = classes.indexOf(value);  
9.                           
10.                         fn(classes, index, value);  
11.                         self.className = classes.join(" ");  
12.                     }  
13.                 }  
14.                   
15.                 return {                      
16.                     add: update(function(classes, index, value) {  
17.                         if (!~index) classes.push(value);  
18.                     }),  
19.                       
20.                     remove: update(function(classes, index) {  
21.                         if (~index) classes.splice(index, 1);  
22.                     }),  
23.                       
24.                     toggle: update(function(classes, index, value) {  
25.                         if (~index)  
26.                             classes.splice(index, 1);  
27.                         else  
28.                             classes.push(value);  
29.                     }),  
30.                       
31.                     contains: function(value) {  
32.                         return !!~self.className.split(/\s+/g).indexOf(value);  
33.                     },  
34.                       
35.                     item: function(i) {  
36.                         return self.className.split(/\s+/g)[i] || null;  
37.                     }  
38.                 };  
39.             }  
40.         });  
41.     }  

第二种：从新写了方法，比前一种代码多点，原文出处

    var classList = null;
    (function(){
        classList = function (obj){
            this.obj = obj;
        };
        classList.prototype.add = function(value){
            if(typeof value !== "string") throw TypeError("the type of value is error");
            if(this.obj.classList){
                this.obj.classList.add(value);
            }else{
                var arr = value.replace(/^\s+|\s+$/g,"").split(/\s+/);
                this.obj.classList +=" "+arr.join(" ");
            }
        };
        classList.prototype.contains = function(value){
            if(typeof value !== "string") throw TypeError("the type of value is error");
            if(this.obj.classList){
                return this.obj.classList.contains(value);
            }else{
                var arr = value.replace(/^\s+|\s+$/g,"").split(/\s+/);
                var _className = this.obj.className;
                for(var i = 0,len= arr.length; i<len; i++){
                    if(_className.search(new RegExp("(\\s+)?"+arr[i]+"(\\s+)?"))===-1){
                        return false;
                    }
                }
                return true;
            }
        };
        classList.prototype.remove = function(value){
            if(typeof value !== "string") throw TypeError("the type of value is error");
            if(this.obj.classList){
                return this.obj.classList.remove(value);
            }else{
                var arr = value.replace(/^\s+|\s+$/g,"").split(/\s+/);
                var _className = this.obj.className;
                for(var i = 0, len = arr.length;i<len; i++){
                    if(_className.search(new RegExp("(\\s+)?"+arr[i]+"(\\s+)?"))!==-1){
                        _className =  _className.replace(new RegExp("(\\s+)?"+arr[i]+"(\\s+)?"),"");
                    }
                }
                this.obj.className = _className;
            }
        };
        classList.prototype.toggle = function(value){
            if(typeof value !== "string") throw TypeError("the type of value is error");
            if(this.contains(value)){
                this.remove(value);
            }else{
                this.add(value);
            }
        };
    })();

ps：附上张鑫旭博客中关于classList的文章，让你理解的更透彻！HTML5 DOM元素类名相关操作API classList简介