jQuery- CSSクラスの取得と設定
jQueryを使用すると、要素のスタイルを簡単に操作できます。
CSSを操作するjQuery
jQueryには、CSS操作のためのいくつかのメソッドがあります。次の方法を見ていきます。
addClass()-選択した要素に1つ以上のクラスを追加しますremoveClass()-選択した要素から1つ以上のクラスを削除しますtoggleClass()-選択した要素からのクラスの追加/削除を切り替えますcss()-スタイル属性を設定または返します
スタイルシートの例
このページのすべての例では、次のスタイルシートが使用されます。
.important
{
font-weight: bold;
font-size: xx-large;
}
.blue
{
color: blue;
}
jQuery addClass（）メソッド
次の例は、クラス属性をさまざまな要素に追加する方法を示しています。もちろん、クラスを追加するときに、複数の要素を選択できます。
例
$("button").click(function(){
$("h1, h2, p").addClass("blue");
$("div").addClass("important");
});
addClass()メソッド内で複数のクラスを指定することもできます。
例
$("button").click(function(){
$("#div1").addClass("important blue");
});
jQuery removeClass（）メソッド
次の例は、さまざまな要素から特定のクラス属性を削除する方法を示しています。
例
$("button").click(function(){
$("h1, h2, p").removeClass("blue");
});
jQueryのtoggleClass（）メソッド
次の例は、jQuerytoggleClass()メソッドの使用方法を示しています。このメソッドは、選択した要素からのクラスの追加と削除を切り替えます。
例
$("button").click(function(){
$("h1, h2, p").toggleClass("blue");
});
jQuery css（）メソッド
jQuerycss()メソッドについては次の章で説明します。
jQueryの演習
jQueryCSSリファレンス
すべてのjQueryCSSメソッドの完全な概要については、jQuery HTML / CSSリファレンスにアクセスしてください。