jQueryのattr()でHTML属性の設定・取得・削除

  • このエントリーをはてなブックマークに追加
  • Pocket

スポンサードリンク

jQueryでHTML属性を操作するattr()の使い方です。

idを取得したりhrefを設定したりなど、HTML属性の取得、複数の属性の設定、removeAttr()を使った属性の削除、またフォームでの不具合などについてご紹介します。

 

属性を取得

まずはHTMLの属性を取得してみましょう。

構文

jQuery

上記の例だとdiv要素にあるid属性を取得します。

attr()の引数に取得したい属性を指定するだけです。

HTML要素のidを取得しコンソールに出力するサンプル

attr()を使ってHTML要素のidを取得し、コンソールに出力させてみます。

HTML

jQuery

結果(コンソール)

box

上記のようにid属性が取得できます。

参考:jQueryでコンソールログを使ったデバッグ方法

属性の設定

今度はattr()を使って、HTML要素に属性を追加します。

構文

jQuery

上記の例ではdiv要素にwrapというid属性を設定します。

attr()の第一引数に設定したい属性名、第二引数に属性に設定する値を指定します。

HTML要素にid属性を設定するサンプル

それではp要素にidを追加してみましょう。

HTML

jQuery

結果

赤字の部分が追加されました。

<p id=”text”>この要素に属性を追加します。</p>

上記のように属性を設定できます。

 

ちなみにclassを設定する場合はaddClass()を使いましょう。

参考:addClass() でclassを追加する

a要素のhref属性を変更するサンプル

attr()idだけでなく、リンクや画像などさまざまな要素の属性を操作できます。

しかも、すでにある属性値を変更することも可能です。

HTML

jQuery

結果

赤字の部分が変更されました。

<a href=”http://www.flatrecipe.nir87.com“>詳しくはコチラ</a>

上記のようにattr()を使ってhrefの値を上書きできます。

複数の属性を設定

attr()は複数の属性を一気に追加することも可能です。

構文

jQuery

上記の例では、a要素にhreftitletargetと3つの属性を追加します。

{}(波カッコ)の中に属性と値を:(セミコロン)で区切ったものを1組にして、,(カンマ)で区切ります。

最後の値の後ろには,(カンマ)は不要です。

img要素に複数の属性を設定するサンプル

それではimg要素に複数の属性を追加してみましょう。

HTML

jQuery

以下のように1行での記述も可能です。

結果

赤字の部分が追加されました。

<img src=”image.jpg” alt=”レシピ” title=”フラットレシピ” width=”480″ height=”320″>

複数設定する場合、項目が多いと1行で記述する場合見にくいため、改行して書くと見やすくなるかと思いますが、好みでよいでしょう。

属性の削除

属性を削除する場合はremoveAttr()というメソッドが用意されています。

構文

jQuery

上記の例ではdiv要素のid属性を削除しています。

removeAttr()の引数に削除したい属性を指定するだけです。

href属性を削除するサンプル

a要素のhref属性を削除してみましょう。

HTML

jQuery

結果

<a>フラットレシピはこちら</a>

href属性が削除され、リンク先に飛ばなくなります。

 

classを削除する場合はremoveClass()を使いましょう。

参考:removeClass() でclassを削除する

attr()での不具合

attr()で属性がなぜか操作できない場合もあります。

よくあるのがフォーム関連での不具合ですね。

jQueryプロパティはprop()を使う

チェックボックスのチェックの状態や、disabledなどはattr()では操作できない場合が多いようです。

以下のページでもご紹介しましたが、jQuery1.6よりHTML属性はattr()、jQueryプロパティはprop()と役割が明確に分かれました。

参考:jQueryでdisabledの設定・解除・判定する方法

例えば、HTMLにcheckedが設定してあった場合、チェックを外してもcheckedの属性は消えないため不具合となります。

チェックの状態などの動的な操作にはattr()は対応していないため、prop()を使うよう推奨されています。

参考:jQueryでチェックボックスを操作するさまざまな方法

スポンサードリンク

  • このエントリーをはてなブックマークに追加
  • Pocket

コメントを残す

*