【jQuery】HTML要素の属性を操作できるattrメソッドについて解説します

こんにちは。たいら(@tairaengineer2)です。
転職を繰り返し現在4社経験している、11年目エンジニアです。

この記事では、 jQueryでHTML要素の属性に対して様々な操作ができるattrメソッドについて

  • attrメソッドとは
  • attrメソッドを使ったサンプルプログラム

と、丁寧に解説していきます。

前提条件:実行環境について

実行環境は以下の通りです。

OS Windows10
jQueryのバージョン 3.6.0

attrメソッドとは

attrメソッドとは、HTML要素の属性に対して

  • 取得
  • 変更
  • 追加

ができるメソッドです。

attrメソッドの基本的な書き方は

です。
セレクタについては、こちらの記事をご参考ください。

次の章からサンプルプログラムをまじえて

  1. attrメソッドでHTML要素の属性を取得
  2. attrメソッドでHTML要素の属性を変更
  3. attrメソッドでHTML要素の属性を追加

と解説します。
解説で使うサンプルプログラムのディレクトリ構造は以下のようになっています。
attrメソッドを解説するディレクトリ構成

jQueryは、GoogleのCDNから読み込みます。
上記のやり方と外部のJavaScriptを読み込むやり方は以下の記事をご参考ください。

jQueryをGoogleのCDNから読み込むやり方
【jQuery】GoogleのCDNから読み込むやり方を解説します

外部のJavaScriptを読み込むやり方
HTMLで外部のJavaScriptを読み込むやり方を解説します

attrメソッドでHTML要素の属性を取得

attrメソッドでHTML要素の属性を取得について解説します。

取得するには

と書きます。

サンプルプログラムではattrメソッドでdivタグのクラスを取得して、アラートで表示させます。

HTMLサンプルプログラム

JavaScriptサンプルプログラム

実行結果

作成したHTMLをブラウザで開き、【ボタン】を押します。
jQueryのattrメソッドの実行確認

指定したidがsampleのclass属性を取得できていることが確認できました。
jQueryのattrメソッドの実行確認

attrメソッドでHTML要素の属性を変更

attrメソッドでHTML要素の属性を変更について解説します。

変更するには

と書きます。

サンプルプログラムではattrメソッドでdivタグのクラスを変更させます。

HTMLサンプルプログラム

JavaScriptサンプルプログラム

実行結果

作成したHTMLをブラウザで開き、F12キーを押してデベロッパーツールを表示させます。
divタグのclassは【hogehoge】であることを確認しました。
【ボタン】を押します。
jQueryのattrメソッドの実行確認

指定したidがsampleのclass属性を【hogehoge】から【piyo】に変更できたことが確認できました。
jQueryのattrメソッドの実行確認

attrメソッドでHTML要素の属性を追加

attrメソッドでHTML要素の属性を追加について解説します。

追加は変更のときと同じく

と書きます。

サンプルプログラムではattrメソッドでdivタグにclass属性を追加します。

HTMLサンプルプログラム

JavaScriptサンプルプログラム

実行結果

作成したHTMLをブラウザで開き、F12キーを押してデベロッパーツールを表示させます。
divタグのclassは指定されていないことを確認しました。
【ボタン】を押します。
jQueryのattrメソッドの実行確認

指定したidがsampleのclass属性に【hogehoge】が追加できたことが確認できました。
jQueryのattrメソッドの実行確認

まとめ:attrメソッドを使ってみよう

以上がjQueryのattrメソッドについての解説でした!

あなたのご参考になったのなら、とても嬉しいです(*´▽`*)
ではでは~(・ω・)ノシ

コメント

タイトルとURLをコピーしました