classListをつかってclassを操作する

jQueryの、hasClass、addClass、removeClass、toggleClassに相当するものが用意されています。IEは10からしかつかえないのと、Android2.Xではつかえないところに注意すればとても便利に活用できますね。

contains

jQuery の hasClass に相当します。
DOMに対して文字列で渡したclassを持っているかをboolで返してくれます。

add

jQuery の addClass に相当します。
DOMに対して文字列で渡したclassを追加します。

remove

jQuery の removeClass に相当します。
DOMに対して文字列で渡したclassを削除します。

toggle

jQuery の toggleClass に相当します。
DOMに対して文字列で渡したclassを持っていれば削除し、持っていなければ追加します。

個人的にはclassListが使えない環境では、引数にDOMとclass名を渡して上記4つの操作を行う関数で対応していました。

function hasClass(elm, className) {
    return (new RegExp("( |^)" + className + "( |$)").test(elm.className));
}

function addClass(elm, className) {
    if (elm.className === "") {
        elm.className = className;
    } else {
        !hasClass(elm, className) && (elm.className = elm.className + " " + className);
    }
    elm.className = elm.className.replace(/ +/g, " ");
    elm.className = elm.className.replace(/^ /, "");
    elm.className = elm.className.replace(/ $/, "");
}

function removeClass(elm, className) {
    elm.className = elm.className.replace(new RegExp("(^| )" + className + "( |$)", "g"), " ");
    elm.className = elm.className.replace(/ +/g, " ");
    elm.className = elm.className.replace(/^ /, "");
    elm.className = elm.className.replace(/ $/, "");
 }

function toggleClass(elm, className) {
    if (hasClass(elm, className)) {
        removeClasses(elm, className);
    } else {
        addClasses(elm, className);
    }
}

便利な世の中になりましたね。