クラスをつけたり消したり
function hasClass(elm, _class) { if(!elm || !_class) return; // var regexp = new RegExp('\\b'+ _class + '\\b'); // \ をエスケープしないと駄目なことを知らずにはまった // var regexp = new RegExp('(^|[^\\w-])' + _class + '([^\\w-]|$)'); var regexp = new RegExp('(^|\\s)' + _class + '(\\s|$)'); // 単純にこれでいける? return regexp.test(elm.className); } function addClass(elm, _class) { if(!elm || !_class) return; if(!hasClass(elm, _class)) { elm.className += ! elm.className ? _class : ' ' + _class; } } function removeClass(elm, _class) { if(!elm || !_class) return; if(hasClass(elm, _class)) { elm.className = elm.className.replace(new RegExp(_class, 'g'), '') .replace(/\s+/g, ' ') .replace(/^\s|\s$/, ''); } }
JsUnit を使うために書いてみた。
JsUnit 用の テストコード
function testHasClass() { var el = document.createElement('div'); el.className = 'hoge fuga foobar foo-bar'; assert(hasClass(el, 'hoge')); assert(hasClass(el, 'fuga')); assertFalse(hasClass(el, 'foo')); assertFalse(hasClass(el, 'bar')); assertFalse(hasClass(el, 'oge')); } function testAddClass() { var el = document.createElement('div'); addClass(el, 'hoge'); assert(el.className == 'hoge'); addClass(el, 'fuga'); assert(el.className == 'hoge fuga'); addClass(el, 'hoge'); assert(el.className == 'hoge fuga'); } function testRemoveClass() { var el = document.createElement('div'); el.className = 'hoge fuga foobar fuga'; assert(el.className == 'hoge fuga foobar fuga') removeClass(el, 'fuga'); assert(el.className == 'hoge foobar'); removeClass(el, 'hage'); assert(el.className == 'hoge foobar'); removeClass(el, 'hoge'); assert(el.className == 'foobar'); }
JsUnit については JsUnit を使った JavaScript のユニットテスト - WebOS Goodies が詳しい。
追記
hasClass 駄目だな。クラス名に "foo-bar" が含まれているとき "bar" or "foo" でも true が返ってくる。
追記 2
とりあえず "-" ハイフン問題は大丈夫になった。他の文字にも対応すべきだろうけどパス。
追記 3
正規表現修正。単純になったけど、これで大丈夫かしら。テストの意味が…。