今回は、jQueryで特定の要素にCSSを追加する方法を説明します。
特定の要素にCSSを追加する
jQueryではcss()メソッドを使って、CSSを追加します。css("追加するCSS")の形式で使います。
以下は、targetというIDがついたdiv要素に対して、CSSを追加を追加する例です。
HTML
|
1 |
<div id="target"></div> |
jQuery
|
1 |
$("#target").css('background', 'red'); |
複数のCSSを追加する方法
次のように、オブジェクトリテラル{}を使い、プロパティと値の組み合わせをカンマで区切ることで複数のプロパティを同時に追加することができます。
|
1 |
css({プロパティ1:値, プロパティ2:値, }) |
jQuery
|
1 |
$("#target").css({"background":"red", "width":"100px", "height":"100px"}); |
CSSを削除する方法
css()メソッドを使って、CSSを削除するにはプロパティの値を空「""」にします。
先ほどの例で、追加したbackgroundプロパティを削除するには以下のようにします。
jQuery
|
1 |
$("#target").css('background', ''); |
複数プロパティの削除
追加の時と同様に、オブジェクトリテラル{}を使い複数プロパティを削除することができます。
ですが、この方法だとCSSの追加・削除が非常に面倒となるので、複数プロパティの追加・削除を行う場合は、クラスを作成してaddClass()メソッドとremoveClass()メソッドを使うと良いでしょう。
参照：jQueryで要素にクラスを追加する：addClass(), removeClass(), toggleClass()
