[JS] クラスのチェック・追加・削除を行う便利なスクリプト Classie.js

[JS] クラスのチェック・追加・削除を行う便利なスクリプト Classie.js

Classie.js という JavaScript のライブラリを見つけました。Classie.js を使うと指定した要素のクラスのチェック・追加・削除を簡単に行う事ができます。jQuery を使うまでもないけれど…という時に便利です。

ダウンロード

ライセンスは MIT です。
desandro/classie · GitHub

使い方

ダウンロードした Classie.js を読み込こんでまずは使う準備が完了です。

<script src="classie.js"></script>

クラスを持っているかをチェックする

クラスを持っていたら true 持っていなかったら false を返します。

classie.has( element, 'my-class' )
例)#element が .red を持っていたらアラートを出す。
<script src="classie.js"></script>
<script>
var element = document.getElementById( 'element' );
if( classie.has( element, 'red' ) ){
	alert('redクラスもってる');
}
</script>

クラスを追加する

要素にクラスを付与します。jQuery でいう addClass() をします。

classie.add( element, 'my-new-class' ) 
例)#btn をクリックしたら #element に .active を付与する。
<script src="classie.js"></script>
<script>
var element = document.getElementById( 'element' ),
btn =  document.getElementById( 'btn' ) ;

btn.onclick = function() {
	classie.add( element, 'active' ) ;
};
</script>

クラスを削除する

要素から指定のクラスを削除します。jQuery でいう removeClass() をします。

classie.remove( element, 'my-unwanted-class' )
例)#btn をクリックしたら #element から .active を削除する。
<script src="classie.js"></script>
<script>
var element = document.getElementById( 'element' ),
btn =  document.getElementById( 'btn' ) ;

btn.onclick = function() {
	classie.remove( element, 'active' ) ;
};
</script>

クラスの追加/削除を交互に行う

指定のクラスを持っていなければそのクラスを付与し、クラスを持っていたら削除します。jQuery でいう toggleClass() をします。

classie.toggle( element, 'my-class' )
例)#btn をクリックする事に #element に .active を付けたり消したりする
<script src="classie.js"></script>
<script>
var element = document.getElementById( 'element' ),
btn =  document.getElementById( 'btn' ) ;

btn.onclick = function() {
	classie.toggle( element, 'active' ) ;
};
</script>

jQuery の使い方に近いので使いやすく、簡単にクラスの操作を行うことができるので便利です。

Related Article

No Comments & Tracbacks

Leave a Comment

Emailは公開されません。*は必須項目です。


*


Categorys

Tags

CSS3 ダッシュボード ヘッダー トラブル コードサンプル スライドショー コンテンツ 素材 jQueryプラグイン Facebook php 引っ越し お知らせ JavaScript CSS カテゴリー Shareボタン IE 投稿タイプ seo Photoshop HTML5 レスポンシブ サイドバー ナビゲーション タクソノミー WPセキュリティ Git カスタムメニュー Macアプリ PHPリファレンス SVG query_posts API WP使い方 iTunes データベース コメント function RSS 条件分岐 get_posts() スマートフォン Sass/Compass マルチサイト機能