CLASSの追加・削除で使える純粋なjavascriptコード jQuery不要・javascriptのみ

PR

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以下では動作しません

PR

COMMENT

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー