第2回 属性＆コンテンツ編：連載：jQuery逆引きリファレンス（7/19 ページ）
要素セットに含まれる要素本体や属性、スタイルを取得／設定するためのメソッドについてまとめた、すぐに役立つ18本を一挙公開。
要素に対してスタイル・クラスを追加するにはaddClassメソッドを、削除するにはremoveClassメソッドを、それぞれ利用します。引数clazzには、空白区切りで複数のクラス名を指定することもできます。
以下は、ボタンをクリックすることで、背景色を青／白と交互に切り替えるためのコードです。背景色を青にするスタイルは、あらかじめスタイル・クラスbg_bとして定義しておきます。
<style type="text/css">
.bg_b { background-color: Blue; }
</style>
……中略……
<script type="text/javascript">
$(function() {
// ボタンクリック時の挙動を定義
$('#c_change').click(
function() {
var d = $('body');
// bg_bクラスが適用されているか
if (d.hasClass('bg_b')) {
// 適用済みの場合は破棄
d.removeClass('bg_b');
} else {
// 未適用の場合は追加
d.addClass('bg_b');
}
}
);
});
</script>
……中略……
<input type="button" id="c_change" value="背景色を変更" />
このHTMLを実際にブラウザで開く
スタイルクラス（class属性）の設定は、attr(name, value)メソッドによっても行うことができます。しかし、attr(name, value)メソッドでは、class属性がすでに設定されている場合、設定済みの値を打ち消してしまいますので要注意です。
一方、addClassメソッドでは、新たなスタイルを「追加」しますので、既存の値が不用意に消えてしまう心配はありません。スタイル・クラスの追加／削除には、できるだけaddClass／removeClassメソッドを優先して利用することをお勧めします。
Copyright© Digital Advantage Corp. All Rights Reserved.