※本サイトにはプロモーションが含まれます。

jQuery|CSSプロパティの値を複数まとめて取得する方法

jQuery

jQueryを使ってCSSプロパティの値を取得する方法を紹介します。

cssメソッドは複数のCSSプロパティの値をまとめて取得することもできます。

スポンサーリンク

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

1つのプロパティの値を取得する

jQueryでCSSプロパティの値を取得するには.css()を使います。

第一引数には取得したいCSSプロパティを指定します。

取得できるプロパティ
  • デフォルトスタイルシートのプロパティ
  • 外部CSSで設定されたプロパティ
  • <style>で設定されたプロパティ
  • 要素にstyle属性で設定されたプロパティ

取得されるCSSプロパティの値は優先順位が一番高いものになります。

サンプル

#sample-01の要素のCSSプロパティの値を取得して表示します。

複数のプロパティの値をまとめて取得する

jQueryの.css()は複数のCSSプロパティの値をまとめて取得することもできます。

まとめて取得するには.css()の第一引数に欲しいプロパティの配列を渡します。

ただし、この方法はjQueryのバージョン1.9以降でしか使えないので、それより前のバージョンを利用している場合は、欲しいプロパティの数だけ.css()を書くことで対応してください。

サンプル

#sample-02の要素のCSSプロパティの値をまとめて取得して表示します。

複数の要素のCSSプロパティの値を取得する

ループ処理を使えば複数の要素のCSSプロパティの値を取得することができます。

サンプル

#sample-03配下のdiv要素の背景色を全て表示します。

スポンサーリンク

フォローする