jQueryで特定の要素にCSSを追加・削除する方法:css()

今回は、jQueryで特定の要素にCSSを追加する方法を説明します。

特定の要素にCSSを追加する

jQueryではcss()メソッドを使って、CSSを追加します。css("追加するCSS")の形式で使います。

以下は、targetというIDがついたdiv要素に対して、CSSを追加を追加する例です。

HTML

jQuery

複数のCSSを追加する方法

次のように、オブジェクトリテラル{}を使い、プロパティと値の組み合わせをカンマで区切ることで複数のプロパティを同時に追加することができます。

jQuery

CSSを削除する方法

css()メソッドを使って、CSSを削除するにはプロパティの値を空「""」にします。

先ほどの例で、追加したbackgroundプロパティを削除するには以下のようにします。

jQuery

複数プロパティの削除

追加の時と同様に、オブジェクトリテラル{}を使い複数プロパティを削除することができます。

ですが、この方法だとCSSの追加・削除が非常に面倒となるので、複数プロパティの追加・削除を行う場合は、クラスを作成してaddClass()メソッドとremoveClass()メソッドを使うと良いでしょう。

参照:jQueryで要素にクラスを追加する:addClass(), removeClass(), toggleClass()


Welcome to UX MILK

UX MILKはより良いサービスやプロダクトを作りたい人のためのメディアです。

このサイトについて

イベント