CLASSの追加・削除で使える純粋なjavascriptコード jQuery不要・javascriptのみ
jQueryって便利です!ほんとに
でも一つボタンを作りたい、使いたいだけでjQueryを読み込ませるのって
無駄が多い気がしませんか?
javascriptだけでできればインライン化してファイルの読み込みもひとつ減らせますし
実はそんなに長くないコードでjavascriptのみでCLASSの追加と削除を行うことができるjavascriptのコード
ソース元はこちら
http://stackoverflow.com/questions/18880890/convert-jquery-toggleclass-code-to-pure-javascript-code
デモとコード
http://jsfiddle.net/4MBQa/
海外の コードに関する 質問サイトにありました
javascript コード
function toggleClass(element, className){ if (!element || !className){ return; } var classString = element.className, nameIndex = classString.indexOf(className); if (nameIndex == -1) { classString += ' ' + className; } else { classString = classString.substr(0, nameIndex) + classString.substr(nameIndex+className.length); } element.className = classString; } //ここで実際に適応する動作を指定 document.getElementById('test-btn').addEventListener('click', function() { toggleClass(document.getElementById('test'), 'test-class'); });
コードの前半はコピペでOK
後半のところを、実際の動作に合わせて変化させてやります、一度使い方を覚えればjavascriptに不慣れでも簡単に使えます
document.getElementById(‘test-btn’)
これで id=”test-btn”というものを対象に動作させる
toggleClass(document.getElementById(‘test’), ‘test-class’);
ここで、id=”test”という要素に class=”test-class”を追加・削除する指定をしています、classは半角で区切って複数指定も可能
HTML
<div> <p id='test'> Hello World </p> </div> <input id='test-btn' type='button'/> <label for="test-btn">ぼたん</label>
input用をを使っているので、ボタンを表示させないでテキストにしたり画像にしたいときはlableで関連付けて
inputはdisplay:none;にしてしまえばOK
inputのcheckを活用したCSSだけで動作させる方法でも同じようなことが可能ですが、CSSの性質上 親要素や離れた要素に使うことが出来ないので、javascriptのこの方法だと遠隔地の要素にクラスの追加・削除が出来ます
CSSの追加と削除なのでCSSの順序が逆だったら何も起きなかったりするので、そこは注意してください
ちょっとしたclassの追加と削除にはこれがいいかと思います
※IE8以下では動作しません
COMMENT