memocarilog

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 の使い方に近いので使いやすく、簡単にクラスの操作を行うことができるので便利です。