【jQuery】css()を使って指定したCSSプロパティ値を取得/設定する!

指定したCSSプロパティ値を取得/設定するにはjQueryのcss()メソッドを使用します。

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

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

今回は、jQueryのcss()メソッドを使って指定したCSSプロパティ値を取得/設定する方法について以下の内容で解説していきます。

⚫︎ CSSのプロパティ値を取得する場合
⚫︎ 単数のCSSプロパティ値を設定する場合
⚫︎ 複数のCSSプロパティ値を設定する場合
⚫︎ 戻り値にCSSプロパティ値を設定する場合

⚫︎ jQueryを使用せずに指定したCSSプロパティ値を取得/設定する場合
⚫︎ css()で要素のCSSプロパティ値を削除する方法

ハルトさん

今回はjQueryのcss()メソッドで指定したCSSプロパティ値を取得/設定する方法について説明していきます。

さとみさん

お願いします!

css()とは

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

css()の書き方

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

パラメータ

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

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

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

指定したCSSプロパティ値を取得/設定するサンプルコード

css()で指定したCSSプロパティ値を取得/設定するサンプルコードを紹介します。

CSSのプロパティ値を取得する方法

CSSのプロパティ値を取得するにはcss()のパラメータに取得したいプロパティを指定します。

sample.html

style.css

index.js

出力結果

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

さとみさん

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

ハルトさん

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

単数のCSSプロパティ値を設定する場合

単数のCSSプロパティ値を設定する場合はcss()のパラメータにプロパティと値を指定します。

sample.html

style.css

index.js

出力結果

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

複数のCSSプロパティ値を設定する場合

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

sample.html

style.css

index.js

出力結果

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

さとみさん

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

ハルトさん

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

戻り値にCSSプロパティ値を設定する場合

戻り値にCSSプロパティ値を設定する場合はcss()のパラメータに関数を指定します。

sample.html

style.css

index.js

出力結果

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

jQueryを使用せずに指定したCSSプロパティ値を取得/設定する場合

jQueryを使用せずに純粋なJavaScriptでCSSプロパティ値の取得や設定を行ってみます。

sample.html

style.css

index.js

出力結果

純粋なJavaScriptで要素のCSSプロパティを変更しています。
その為、ボタンを押すと要素の透明度が変化し、透明度の値がアラートで表示されます。

css()で要素のCSSプロパティ値を削除する方法

css()で要素のCSSプロパティ値を削除するにはcss()のパラメータの値を「””」で指定します。

sample.html

style.css

index.js

出力結果

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

今回のポイント

css()で指定したCSSプロパティ値を取得/設定

⚫︎ 指定したCSSプロパティ値を取得/設定するにはjQueryのcss()メソッドを使用する

⚫︎ 指定したCSSプロパティ値を取得する場合はcss()のパラメータにプロパティを使用する

⚫︎ 単数のCSSプロパティ値を設定する場合はcss()のパラメータにプロパティと値を指定する

⚫︎ 複数のCSSプロパティ値を設定する場合はcss()のパラメータにプロパティと値のマップ値を指定する

⚫︎ 戻り値としてCSSプロパティ値を設定する場合はcss()のパラメータに関数を指定する

⚫︎ CSSプロパティ値を削除する場合はcss()のパラメータの値に「””」を指定する

Writer

ST

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

最新の案件情報