【jQuery】prop()を使ってプロパティ値の取得や設定を行う!

要素のプロパティ値の取得や設定を行うにはjQueryのprop()メソッドを使用します。

jQueryのprop()メソッドとは要素のプロパティ値の取得や設定を行うメソッドであり、ボタンを押した時などのイベント時などに要素の属性を取得でき、また設定することでタグはそのままで画像を差し替えたりすることができます。

また、prop()メソッドに似ているattr()メソッドがありますが、返される結果が異なりますので、同じメソッドであるという認識はしないでください。

今回は、jQueryのprop()メソッドを使って要素のプロパティ値の取得や設定を行う方法について以下の内容で解説していきます。

⚫︎ 要素のプロパティ値を取得する場合
⚫︎ 要素のプロパティ値を設定する場合

⚫︎ jQueryを使用せずに要素のプロパティ値を取得する場合
⚫︎ jQueryを使用せずに要素のプロパティ値を設定する場合

⚫︎ prop()とattr()の違い

ハルトさん

今回はjQueryのprop()メソッドで要素のプロパティ値の取得や設定を行う方法について説明していきます。

さとみさん

お願いします!

prop()とは

prop()とは、要素のプロパティ値を取得したり、設定したりするメソッドとなります。

prop()の書き方

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

prop()の引数にプロパティ値を指定することで、要素のプロパティ値を指定することができ、prop()の引数にプロパティ値とプロパティ内容を指定することで、要素のプロパティ値をプロパティ内容に設定することができます。

要素のプロパティ値の取得や設定を行うサンプルコード

要素のプロパティ値の取得や設定を行うサンプルコードを紹介します。

要素のプロパティ値を取得する場合

要素のプロパティ値を設定する場合はprop()の引数を1つ指定します。

sample.html

index.js

出力結果

prop()の引数を1つ指定することで、指定した要素のプロパティ値を取得しています。
そのため、ボタンを押すと、指定した要素の属性が表示されています。

さとみさん

prop()の引数を1つ指定することで、要素の指定したプロパティ値を取得することができるのですね!

ハルトさん

そうですね。
prop()の引数を1つ指定すると、既に持っているプロパティ値の値を取得するようになります。

要素のプロパティ値を設定する場合

要素のプロパティ値を設定する場合はprop()の引数を2つ指定します。
第一引数が属性名、第二引数が設定する内容となります。

sample.html

index.js

出力結果

prop()の引数を2つ指定することで、要素の指定したプロパティ値が設定されています。
そのため、ボタンを押すと、指定した要素の画像が変化しています。

さとみさん

prop()の引数を2つ指定することで、要素の指定したプロパティ値を設定することができるのですね!

ハルトさん

そうですね。
今回のサンプルコードではsrcプロパティを設定していますが、classプロパティやidプロパティなども設定することができますよ。
また、classプロパティを持っていない要素にclassプロパティを設定した場合は、classプロパティが追加されるようになります。

jQueryを使用せずに要素のプロパティ値の取得や設定を行う場合

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

jQueryを使用せずに要素のプロパティ値を取得する場合

純粋なJavaScriptで要素のプロパティ値を取得してみます。

sample.html

index.js

出力結果

prop()の引数を2つ指定することで、指定したプロパティ値が上書きされています。
そのため、ボタンを押すと、指定した要素の画像が変化しています。

jQueryを使用せずに要素のプロパティ値を設定する場合

純粋なJavaScriptで要素のプロパティ値の設定を行います。

sample.html

index.js

出力結果

純粋なJavaScriptでプロパティ値を設定しています。

prop()とattr()の違い

prop()メソッドとattr()メソッドは見た感じ同じように見えますが、以下のような違いがあります。

⚫︎ prop()とattr()で指定する値が異なる場合がある
⚫︎ prop()とattr()で返される値が異なる場合がある

prop()とattr()で指定する値が異なる場合がある

prop()メソッドとattr()メソッドは指定する値が異なる場合があります。
プロパティ名は単語の区切りが英大文字(キャメルケース)で、属性名は全て小文字になります。

例えば次のサンプルコードを見て見ましょう。
prop()メソッドとattr()メソッドに属性名である「class」、プロパティ名である「className」をお互いに指定して取得してみます。

sample.html

index.js

出力結果

prop()はclassの属性値を指定してもプロパティ値を取得することができますが、attr()はclassNameのプロパティ値を取得しても属性値を取得することができません。

そのため、prop()はattr()と同じような動きに変わってきているように見えます。

attr()メソッドについて詳しく知りたい場合はこちらをご参考ください。

prop()とattr()で返される値が異なる場合がある

prop()メソッドとattr()メソッドは同じプロパティ名、属性名を指定した場合に返される結果が異なる場合があります。
例えば、次のサンプルコードを見て見ましょう。

ラジオボタンの値を取得しようとすると、prop()やattr()では取得する値が異なります。

sample.html

index.js

出力結果

prop()では「true」や「false」の真偽値、attr()では「checked」や「undefined」の値を取得することになります。

さとみさん

prop()メソッドとattr()メソッドはどちらも同じように見えますが、指定する値や取得する値が異なる場合があるんですね!

ハルトさん

そうですね。
prop()は属性名を指定してもプロパティ値を取得できますので、attr()よりprop()を使用した方が良さそうです。
そして、prop()はラジオボタンやチェックボックスの値を真偽値で返すので条件式を書く際にも便利です。

ハルトさん

また、取得できる値の違いにより、attr()では思ったような動きにならない場合があったためchecked、disabled、selectedといったプロパティの操作に、attr()を使うのは推奨されなくなりました。

今回のポイント

prop()で要素のプロパティ値の取得や設定を行う

⚫︎ 要素のプロパティ値の取得や設定を行うにはjQueryのprop()メソッドを使用する

⚫︎ prop()メソッドで要素のプロパティ値の取得するにはprop()メソッドの第1引数にプロパティ値を指定する

⚫︎ prop()メソッドで要素のプロパティ値の設定を行うにはprop()メソッドの第1引数にプロパティ値、第2引数にプロパティ内容を指定する

⚫︎ prop()メソッドとattr()メソッドは同じプロパティ名、属性名を指定したが異なる場合や、返される結果が異なる場合がある

Writer
壷井

壷井

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

最新の案件情報

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