【jQuery】attr()を使って要素の属性値の取得や設定を行う!

要素の属性値の取得や設定を行うにはjQueryのattr()メソッドを使用します。

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

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

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

⚫︎ 要素の属性値を取得する場合
⚫︎ 要素の属性値を設定する場合

⚫︎ jQueryを使用せずに要素の属性値を取得する場合
⚫︎ jQueryを使用せずに要素の属性値を設定する場合

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

ハルトさん

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

さとみさん

お願いします!

attr()とは

attr()とは、要素の属性値を取得したり、設定したりするメソッドとなります。

attr()の書き方

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

attr()の引数に属性値を指定することで、要素の属性値を指定することができ、attr()の引数に属性値と属性内容を指定することで、要素の属性値を属性内容に上書きすることができます。

要素の属性値の取得や設定を行うサンプルコード

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

要素の属性値を取得する場合

要素の属性値を設定する場合はattr()の引数を1つ指定します。

sample.html

index.js

出力結果

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

さとみさん

attr()の引数を1つ指定することで、要素の指定した属性値を取得することができるのですね!

ハルトさん

そうですね。
attr()の引数を1つ指定すると、既に持っている属性値の値を取得するようになります。

要素の属性値を設定する場合

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

sample.html

index.js

出力結果

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

さとみさん

attr()の引数を2つ指定することで、要素の指定した属性値が設定することができるのですね!

ハルトさん

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

jQueryを使用せずに要素の属性値の取得や設定を行う場合

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

jQueryを使用せずに要素の属性値を取得する場合

純粋なJavaScriptで要素の属性値を取得してみます。

sample.html

index.js

出力結果

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

jQueryを使用せずに要素の属性値を設定する場合

純粋なJavaScriptで要素の属性値の設定を行います。

sample.html

index.js

出力結果

純粋なJavaScriptで属性値を設定しています。

attr()とprop()の違い

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

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

さとみさん

attr()メソッドとprop()メソッドの違いでどのような名前で異なることがありますか?

ハルトさん

例えば、属性名が「class」であるなら、プロパティは「className」であったり、属性名が「rowspan」であるならプロパティは「rowSpan」であるなど小文字表示である属性名に対して、プロパティ名は基本キャメルケースになります。

今回のポイント

attr()で要素の属性値の取得や設定を行う

⚫︎ 要素の属性値の取得や設定を行うにはjQueryのattr()メソッドを使用する

⚫︎ attr()メソッドで要素の属性値の取得するにはattr()メソッドの引数に属性値を指定する

⚫︎ attr()メソッドで要素の属性値の設定を行うにはattr()メソッドの引数に属性値と属性内容を指定する

⚫︎ attr()メソッドとprop()メソッドは同じ属性、プロパティ名を指定した場合、返される結果が異なることがある
(属性名は全て小文字で、プロパティ名はキャメルケースになる)

Writer
壷井

壷井

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

最新の案件情報

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