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); } }
便利な世の中になりましたね。