THE HAM MEDIA BLOG

今回はclass関連。
classをつけたりとったりすることについて勉強。

個人的にこの点んについては比較的覚えているのだけど、
復習というような感じですすめます。

addClass( class )

これはクラスを付け加える関数。
ここのブログでは画像へリンクされていた場合、
自動的にlightboxのクラスを付け加えたりする機能をつけているが、
それもこれを使っている。

■サンプルソース

$(document).ready(function(){
    $("input.samp1").click(function(){
        $("p.add01 span").addClass("addSamp01");
    });
});

■サンプル１ HTMLソース

<p class="add01">
<span>ここにclassが付加されて変化します</span>
</p>
<input type="button"
 value="クリックでclass付加" class="samp1" />

■サンプル１ CSSソース

span.addSamp01{
    color: #ff00ff;
    font-size:133%;
    font-weight: bold;
}

classがついたらこのCSSが適応されるようにしてみます。

■サンプル１ プレビュー

クリックすると、spanにclassが付加され、
あらかじめ設定しておいたCSSが適応されるようになっています。

これのメリットは、CSSが付加されるだけなので、
装飾自体はあらかじめCSSに記述しておけば、
自動的に適応される事です。

JavaScriptでCSSを制御するよりもメンテナンスはしやすいと思います。

removeClass( class )

これはclassを取り除く関数。
あらかじめclassをつけておいたのを取り除く事ができるのです。

■サンプルソース

$(document).ready(function(){
    $("input.samp2").click(function(){
        $("p.add02 span").removeClass("addSamp02");
    });
});

■サンプル２ HTMLソース

<p class="add02">
<span class="removeSamp02">ここのclassがとれて変化します</span>
</p>
<input type="button"
 value="クリックでclassを除去" class="samp2" />

■サンプル２ CSSソース

span.removeSamp02{
    color: #ff5500;
    font-size:133%;
    font-weight: bold;
}

classがついたらこのCSSが適応されるようにしてみます。

■サンプル２ プレビュー

先ほどのクラスを加えたのとは違い、
クラスを抜くだけで、CSSの適応をなくすこともできるので、
これもメンテナンス制に長けていると思います。

toggleClass( class )

これはclassをとったりつけたりできる関数です。

■サンプルソース

$(document).ready(function(){
    $("input.samp3").click(function(){
        $("p.add03 span").toggleClass("addSamp03");
    }).toggle(
		function(){$(this).val("クリックでclass除去");
		},function(){$(this).val("クリックでclassを付加");
		});
});

このサンプルはinputのvalueの中身も変化するように作りました。

■サンプル3 HTMLソース

<p class="add03">
<span>ここのclassがついたりとれたりします</span>
</p>
<input type="button"
 value="クリックでclassを付加" class="samp3" />

■サンプル3 CSSソース

span.addSamp03{
    color: #7f7fff;
    font-size:133%;
    font-weight: bold;
}

classがついたらこのCSSが適応されるようにしてみます。

■サンプル３ プレビュー

これはaddClassもremoveClassもどちらの効果もあるのがわかると思います。
前の二つのサンプルとは違って、一度だけ適応となるのではなく、
classを加えたりとったりを繰り返します。
つけたりとったりしたいときはこれを利用しましょう。

※ hasClass( class )

これは、クラスを持っているかどうかの判定だと思うのですが、
今回はサンプルが浮かばなかったために割愛。

というより、もしこれが判定だとして、使うときってくるのでしょうか？

$(.class)・・・でいいような気がします。