原生JS操做DOM元素的類名class

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|$)" )," " );
        };
    };