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