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