1.classList

详见MDN Element.classList

add( String [, String] )

增添指定的类值。假如这些类已存在于元素的属性中，那末它们将被疏忽。

remove( String [,String] )

删除指定的类值。

item ( Number )

按鸠合中的索引返回类值。

toggle ( String [, force] )

当只要一个参数时：切换 class value; 即假如类存在，则删除它并返回false，假如不存在，则增添它并返回true。

当存在第二个参数时：假如第二个参数的计算结果为true，则增添指定的类值，假如计算结果为false，则删除它

contains( String )

搜检元素的类属性中是不是存在指定的类值。

replace( oldClass, newClass )

用一个新类替代已有类。

IE10+仅有限兼容，不支持SVG元素，不支持 toggle(), 多参数的add()和remove(), 以及replace()

2.className + 字符串操纵

    var classValue = element.className;
    //加上空格, 不然想查询"abc"，若底本有"abcd"的类名的就会有题目
    classValue = " " + classValue + " ";
    //查询
    classValue.indexOf(" yourClassName ") === -1 ? false : true;//一样的查询时也要带上空格*2
    //增添
    classValue += " yourClassName";//注重空格*1
        //或
    classValue = classVal.concat(" someClassName");//注重空格*1
    element.setAttribute("class", classValue);
    //删除
    classValue = classValue.replace(" yourClassName "," ");//注重空格*3
    element.setAttribute("class",classValue );
    //修正
    classValue = classValue.replace(" targetClassName "," yourClassName ");//注重空格*4
    element.setAttribute("class",classValue );

3.className + 正则

和上面的要领一样，只是空格换成了正则推断

    var element = document.querySelector('#yourId');
    //查询
    function hasClass( element,yourClassName ){
    return !!element.className.match( new RegExp( "(\\s|^)" + yourClassName + "(\\s|$)") );
    // ( \\s|^ ) 推断前面为空格或肇端 （\\s | $ ）推断背面为空格或完毕 两个叹息号为转换为布尔值 以轻易做推断
    };
    //增添
    function addClass( element,yourClassName ){
    if( !hasClass( element,yourClassName ) ){
    element.className += " " + yourClassName;
    };
    };
    //删除
    function removeClass( element,yourClassName ){
        if( hasClass( element,yourClassName ) ){
            element.className = element.className.replace( new RegExp( "(\\s|^)" + yourClassName + "(\\s|$)" )," " );
        };
    };