操作class属性的新API--classList

操作class是前端开发中经常需要用到的，尤其在分工细的公司。class几乎是JS工程师与页面构建师的桥梁。几乎所有的流行库都提供了class属性操作的几个方法。如 addClass/removeClass/toggleClass/hasClass。

 

现在HTML5提供了classList API，除了IE（包括IE9/10），其它现代浏览器均支持该属性。重写了下class属性模块。

 

domClass = function() {
    
    // IE6-10 不支持
    // Safari5/Chrome8/Firefox3.6/Opera11.5 及以上版本支持
    var supportClassList = function() {
        var div = document.createElement('div');
        div.className = 'a';
        return !!div.classList;
    }();
    
    var hasClass, addClass, removeClass, toggleClass, replaceClass;
    
    function check(el, cls) {
        if (el.nodeType !== 1 || typeof cls !== 'string') {
            return false;
        }
        return true;
    }
    
    if(supportClassList) {
        hasClass = function(el, cls) {
            if( check(el, cls) )
                return el.classList.contains(cls);
            else
                return false;
        };
        addClass = function(el, cls) {
            var i = 0, c;
            if( check(el, cls) ) {
                cls = cls.split(' ');
                while( c = cls[i++] ) {
                    el.classList.add(c);
                }
            }
        };
        removeClass = function(el, cls) {
            var i = 0, c;
            if( check(el, cls) ) {
                cls = cls.split(' ');
                while( c = cls[i++] ) {
                    el.classList.remove(c);
                }
            }
        };
        toggleClass = function(el, cls) {
            if( check(el, cls) ) {
                el.classList.toggle(cls);
            }
        };
    }
    else {
        hasClass = function(el, cls) {
            if( check(el, cls) )
                return (' ' + el.className + ' ').indexOf(' ' + cls + ' ') != -1;
            else
                return false
        };
        addClass = function(el, cls) {
            if( check(el, cls) && !hasClass(el, cls) ) {
                el.className += (el.className ? " " : "") + cls;;
            }
        };
        
        removeClass = function(el, cls) {
            if( check(el, cls) ) {
                el.className = el.className.replace(RegExp("\\b" + cls + "\\b", "g"), "");
            }
        };
        toggleClass = function(el, cls) {
            hasClass(el, cls) ? removeClass(el, cls) : addClass(el, cls);
        };
    }

    replaceClass = function(el, oldCls, newCls) {
        removeClass(el, oldCls);
        addClass(el, newCls);
    };
    
    return {
        has : hasClass,
        add : addClass,
        remove : removeClass,
        toggle : toggleClass,
        replace : replaceClass
    };
    
}();

 

 

相关：

https://developer.mozilla.org/en/DOM/element.classList

http://davidwalsh.name/classlist

http://www.whatwg.org/specs/web-apps/current-work/multipage/elements.html#dom-classlist