【jQuery】css()を使って要素のスタイルシートを変更する!

要素のスタイルシートを変更するにはjQueryのcss()メソッドを使用します。

jQueryのcss()メソッドとは要素のCSSプロパティに値を設定、または設定されているプロパティ値を取得するメソッドであり、要素の背景色や大きさ、透過度などのデザインを変更することができます。

また、css()メソッドといえば上記のようにCSSを変更する為に使用するイメージが強いですが、CSSのプロパティ値を取得することも可能であったり、if文などの条件を設定した上でCSSの変更やプロパティの取得を行ったりすることもできます。

今回は、jQueryのcss()メソッドを使って要素のスタイルシートを変更する方法について以下の内容で解説していきます。

⚫︎ 単数のスタイルを設定して要素のスタイルを変更する場合
⚫︎ 複数のスタイルを設定して要素のスタイルを変更する場合
⚫︎ 要素のスタイルを削除する場合
⚫︎ 条件などを指定して要素のスタイルシートを変更する場合

⚫︎ jQueryを使用せずに要素のスタイルシートを変更する場合
⚫︎ css()でCSSのプロパティ値を取得する方法

ハルトさん

今回はjQueryのcss()メソッドで要素のスタイルシートを変更する方法について説明していきます。

さとみさん

お願いします!

css()とは

css()とは、CSSプロパティに値を設定、または設定されているプロパティ値を取得するメソッドとなります。

css()の書き方

css()メソッドの書き方は下記となります。

パラメータ

⚫︎ プロパティ:
変更したいCSSのプロパティを指定する
(プロパティのみを指定した場合は値を取得する)
⚫︎ :
変更したいプロパティの値を指定する
⚫︎ 関数:
変更したいCSSのプロパティ値を戻り値として返す関数を指定する

css()のパラメータにプロパティと値を指定することで、セレクタのスタイルシートを変更することができ、プロパティと値をマップ値として指定することでセレクタの複数のスタイルシートを変更することができます。

また、パラメータにプロパティと関数を指定することで、変更したいCSSのプロパティ値を戻り値として返すことができます。

要素のスタイルシートを変更するサンプルコード

css()で要素のスタイルシートを変更するサンプルコードを紹介します。

単数のスタイルを設定して要素のスタイルを変更する場合

単数のスタイルを設定して要素のスタイルを変更する場合はcss()のパラメータにプロパティと値を指定します。

sample.html

style.css

index.js

出力結果

css()のパラメータにプロパティと値を指定することで単数のスタイルを設定して要素のスタイルを変更しています。
そのため、ボタンを押すと要素の背景色が変更しています。

複数のスタイルを設定して要素のスタイルを変更する場合

複数のスタイルを設定して要素のスタイルを変更する場合はcss()のパラメータにプロパティと値をマップ値として指定します。

sample.html

style.css

index.js

出力結果

css()のパラメータにプロパティと値をマップ値として指定することで複数のスタイルを設定して要素のスタイルを変更しています。
そのため、ボタンを押すと要素の背景色、透明度、幅が変更しています。

さとみさん

css()のパラメータにプロパティと値をマップ値として指定することで複数のスタイルを設定して要素のスタイルを変更することができるのですね!

ハルトさん

そうですね。
サンプルコードでは値に「200px」を指定していますが、「+=20」や「-=20」のように計算式の値を指定することもできますよ。

要素のスタイルを削除する場合

要素のスタイルを削除する場合はcss()のパラメータの値を「””」で指定します。

sample.html

style.css

index.js

出力結果

css()のパラメータの値に「””」を指定することでCSSのプロパティを削除しています。
そのため、ボタンを押すとdivクラスの背景色が削除されています。

条件などを指定して要素のスタイルシートを変更する場合

条件などを指定して要素のスタイルシートを変更する場合はcss()のパラメータに関数を指定します。

sample.html

style.css

index.js

出力結果

css()のパラメータに関数を指定することで条件などを処理を行なった後に要素のスタイルシートを変更しています。
そのため、先にobjectA4クラスの背景色を変更しないとobjectB4クラスの背景色が変更されません。

jQueryを使用せずに要素のスタイルシートを変更する場合

jQueryを使用せずに純粋なJavaScriptで要素のスタイルシートを変更してみます。

sample.html

style.css

index.js

出力結果

純粋なJavaScriptで要素のスタイルシートを変更しています。
その為、ボタンを押すと要素の背景色が変化します。

css()でCSSのプロパティ値を取得する方法

css()はスタイルシートを設定する以外にも、CSSのプロパティ値を取得することもできます。
CSSのプロパティ値を取得するにはcss()のパラメータに取得したいプロパティを指定します。

sample.html

style.css

index.js

出力結果

css()のパラメータに取得したいプロパティのみを指定することで指定した要素のプロパティ値を取得することができます。
その為、ボタンを押すとobjectA6クラスとobjectB6クラスの幅の値を取得しています。

さとみさん

css()はスタイルを変更するために使用するイメージが強かったのですが、プロパティの値を取得することもできるのですね!

ハルトさん

そうですね。
css()は、パラメータにプロパティのみを指定した場合は、そのプロパティの値を返すようになります。

今回のポイント

css()で要素のスタイルシートを変更

⚫︎ 要素のスタイルシートを変更するにはjQueryのcss()メソッドを使用する

⚫︎ 要素のスタイルシートを変更する場合はcss()のパラメータにプロパティと値を指定する

⚫︎ 要素のスタイルシートを複数変更する場合はcss()のパラメータにプロパティと値のマップ値を指定する

⚫︎ 要素のスタイルシートを削除する場合はcss()のパラメータの値に「””」を指定する

⚫︎ 条件などの処理後に要素のスタイルシートを変更する場合はcss()のパラメータにプロパティと関数を指定する

Writer
壷井

壷井

株式会社flyhawkの壷井です。フライテックメディア事業部でのメディア運営・ライター業務なども担当。愛機はMac Book AirとThinkPad。好きな言語:swift、JS系(Node.js等)。好きなサーバー:AWS。受託開発やプログラミングスクールの運営をしております。ご気軽にお問い合わせください。

最新の案件情報

フリーランスエンジニアの案件探し