原生js实现添加删除和查询元素的class

首先先来一个兼容性的版本

判断元素是否有某个class

    function hasClass( elements,cName ){
        return !!elements.className.match( new RegExp( "(\\s|^)" + cName + "(\\s|$)") ); // ( \\s|^ ) 判断前面是否有空格 （\\s | $ ）判断后面是否有空格 两个感叹号为转换为布尔值 以方便做判断
    };

给元素添加class，首先使用hasClass方法进行了判断

    function addClass( elements,cName ){
        if( !hasClass( elements,cName ) ){
            elements.className += " " + cName;
        };
    };

删除元素的一个class

    function removeClass( elements,cName ){
        if( hasClass( elements,cName ) ){
            elements.className = elements.className.replace( new RegExp( "(\\s|^)" + cName + "(\\s|$)" )," " ); // replace方法是替换
        };
    };

以上的三个方法最好全部作为一个组件引入，省心

我们来说说html5的新添加的classList属性（ie10以下就别想了）

添加方法

add(class1, class2, ...) 在元素中添加一个或多个类名。

使用

document.getElementById("id").classList.add("a", "b", "c");

在dom对象上添加了三个class

如果需要把原来的全部清除，重新添加使用赋值的方法

document.getElementById("id").className = "class";

查询dom元素上是否存在class

contains(class) 返回布尔值，判断指定的类名是否存在。

document.getElementById("id").classList.contains("class");

判断一个class名，存在返回true，不存在返回false

删除class的方法

remove(class1, class2, ...) 移除元素中一个或多个类名。

document.getElementById("id").remove("a","b");

清除元素上的a，b两个元素

如果需要全部清除的话，直接使用赋值的方式

document.getElementById("id").className = "";