jQueryでHTML要素の属性(プロパティ)を取得・追加・削除する方法

jQueryを使ってHTMLの属性を操作する方法です。

HTML属性は画像を表示させるタグ <img> の画像を指定する src などのことをさします。

id や class も属性です。

プロパティとも呼ばれます。(僕はプロパティのほうが馴染むのでプロパティと呼びます。)

これを利用すれば画像を動的に変更したり、リンク先の href プロパティを変更したり出来ます。

プロパティ名を指定して値を取得する

HTMLのプロパティの値を取得するには attr() を使います。

引数にはプロパティ名を入れます。

 

以下のようなHTMLの画像を表示するタグがあるとします。

この画像の src プロパティの値を取得する方法は以下のように書きます。

idname というIDを持つタグの src というプロパティの値を取得するということです。

これを実行すると v には “/images/logo.jpeg” という値が入ります。

 

alt プロパティの値を取得する場合は以下のように書きます。

これを実行すると v には “ロゴ画像” という値が入ります。

 

指定したHTML要素に、指定したプロパティが存在しない場合には undefined が返ってきます。

属性を追加する

HTMLのプロパティの値を追加するには attr() を使います。

取得時にも同じ attr() を使いましたが、引数の数で動作が変わります。

第一引数にはプロパティ名、第二引数には値をセットします。

 

上の画像を表示するHTMLに対し画像の横幅を指定する width プロパティに 200 という値を設定しようと思います。

その場合は以下のように書きます。

 

複数のプロパティを同時に追加するには以下のように書きます。

プロパティ名を指定してプロパティを削除する

プロパティを削除する場合は removeAttr() を使います。

引数にはプロパティ名を入れます。

 

上のHTMLの height プロパティを削除する場合は以下のように書きます。

 

複数のプロパティを同時に削除する場合には以下のように書きます。

追加のときとは違い、1つの文字列の引数の中にスペース区切りで削除したいプロパティ名を書きます。

指定したプロパティが存在するかどうか判定

さきほどもちょろっと説明しましたが、指定したHTML要素に、指定したプロパティが存在しない場合には undefined が返ってきます。

つまり以下のような条件分岐が出来ます。

まとめ

HTMLのプロパティは、属性とも呼び、srcやhrefなどのこと。

プロパティ値の取得は、var v = $(セレクタ).attr(プロパティ名);

プロパティの設定は、$(セレクタ).attr(プロパティ名, 値);

複数設定する場合は、$(セレクタ).attr({プロパティ名: 値, プロパティ名: 値, プロパティ名: 値});

プロパティを削除する場合は、$(セレクタ).removeAttr(プロパティ名);

複数削除する場合は、$(セレクタ).removeAttr(プロパティ名 プロパティ名 プロパティ名);

コロナの影響でみんな大変だから俺もなんかできること

僕は福井県に住んでいるのですが、戦時中に福井大空襲にあい、その直後に大震災にあってボロボロになった話をおばあちゃんに聞きました。

それでも復活することができ、不死鳥の町と言われるようになりました。

先人達には心から感謝し尊敬します。

リーマンショック、東日本大震災、コロナと数十年に一度と言われる被害が立て続けに起きていますが、僕たちは強いです。

今は苦しいかもしれませんがきっと復活できます。

僕は低学歴ですし小さな小さな粒でしかないですが、プログラミングに関しては必死に勉強し15年以上ごはんにありつけています。

プログラミングを勉強している人の役に立てるほどのスキルはあると思っています。

なので1人でもんもんと悩んでいる若手のエンジニア向けに質問を受け付けることにします。

自宅で待機されている間もパソコンとインターネットがあればプログラミングの勉強はできます。

  • PHP
  • SQL
  • HTML・CSS
  • jQuery

とは言ってもいきなり答えを聞いていたのではなかなか成長できないと思うのです。

なので質問の際には次のことをご連携ください。

  • 何をやりたいか
  • どんなことを調べたか、検索キーワードと参考にしたページのURL
  • 調べた結果どこが分からないか
  • できるなら試したコード

メッセージいはとりあえずTwitterにでもください。

質問はこちら

すぐに返事できないかもしれませんがご了承ください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA