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

    给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及以下等）总结两种兼容解决方案：

第一种：

if (!("classList" in document.documentElement)) {
        Object.defineProperty(HTMLElement.prototype, 'classList', {
            get: function() {
                var self = this;
                function update(fn) {
                    return function(value) {
                        var classes = self.className.split(/\s+/g),
                            index = classes.indexOf(value);

                        fn(classes, index, value);
                        self.className = classes.join(" ");
                    }
                }

                return {
                    add: update(function(classes, index, value) {
                        if (!~index) classes.push(value);
                    }),

                    remove: update(function(classes, index) {
                        if (~index) classes.splice(index, 1);
                    }),

                    toggle: update(function(classes, index, value) {
                        if (~index)
                            classes.splice(index, 1);
                        else
                            classes.push(value);
                    }),

                    contains: function(value) {
                        return !!~self.className.split(/\s+/g).indexOf(value);
                    },

                    item: function(i) {
                        return self.className.split(/\s+/g)[i] || null;
                    }
                };
            }
        });
    }

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

    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; iif(_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;iif(_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简介

转载于:https://www.cnblogs.com/toggle/p/7625963.html