jQueryでHTML属性を操作するattr()の使い方です。
idを取得したりhrefを設定したりなど、HTML属性の取得、複数の属性の設定、removeAttr()を使った属性の削除、またフォームでの不具合などについてご紹介します。
目次
属性を取得
まずはHTMLの属性を取得してみましょう。
構文
jQuery
|
1 |
$('div').attr('id'); |
上記の例だとdiv要素にあるid属性を取得します。
attr()の引数に取得したい属性を指定するだけです。
HTML要素のidを取得しコンソールに出力するサンプル
attr()を使ってHTML要素のidを取得し、コンソールに出力させてみます。
HTML
|
1 2 3 |
<div id="box"> </div> |
jQuery
|
1 2 3 4 5 6 7 8 9 |
$(function() { //div要素のidを取得し変数に格納 var id = $('div').attr('id'); //上記で取得したidをコンソールに出力 console.log(id); }); |
結果（コンソール）
box
上記のようにid属性が取得できます。
属性の設定
今度はattr()を使って、HTML要素に属性を追加します。
構文
jQuery
|
1 2 |
// attr( 属性名, 値 ) $('div').attr('id', 'wrap'); |
上記の例ではdiv要素にwrapというid属性を設定します。
attr()の第一引数に設定したい属性名、第二引数に属性に設定する値を指定します。
HTML要素にid属性を設定するサンプル
それではp要素にidを追加してみましょう。
HTML
|
1 |
<p>この要素に属性を追加します。</p> |
jQuery
|
1 2 3 4 5 6 |
$(function() { //p要素にidを設定する $('p').attr('id', 'text'); }); |
結果
赤字の部分が追加されました。
<p id=”text”>この要素に属性を追加します。</p>
上記のように属性を設定できます。
ちなみにclassを設定する場合はaddClass()を使いましょう。
a要素のhref属性を変更するサンプル
attr()はidだけでなく、リンクや画像などさまざまな要素の属性を操作できます。
しかも、すでにある属性値を変更することも可能です。
HTML
|
1 |
<a href="#">詳しくはコチラ</a> |
jQuery
|
1 2 3 4 5 6 |
$(function() { //a要素のhrefを変更する $('a').attr('href', 'http://www.flatrecipe.nir87.com'); }); |
結果
赤字の部分が変更されました。
<a href=”http://www.flatrecipe.nir87.com“>詳しくはコチラ</a>
上記のようにattr()を使ってhrefの値を上書きできます。
複数の属性を設定
attr()は複数の属性を一気に追加することも可能です。
構文
jQuery
|
1 2 3 4 5 |
$('a').attr({ href: 'http://www.flatrecipe.nir87.com', title: 'フラットレシピ', target: '_blank' }); |
上記の例では、a要素にhreftitletargetと3つの属性を追加します。
{}（波カッコ）の中に属性と値を:（セミコロン）で区切ったものを1組にして、,（カンマ）で区切ります。
最後の値の後ろには,（カンマ）は不要です。
img要素に複数の属性を設定するサンプル
それではimg要素に複数の属性を追加してみましょう。
HTML
|
1 |
<img src="image.jpg"> |
jQuery
|
1 2 3 4 5 6 7 8 9 10 11 |
$(function() { //見やすいように1つずつ改行 $('img').attr({ alt: 'レシピ', title: 'フラットレシピ', width: 480, height: 320 }); }); |
以下のように1行での記述も可能です。
|
1 2 3 4 5 6 |
$(function() { //1行で記述 $('img').attr({alt: 'レシピ', title: 'フラットレシピ', width: 480, height: 320}); }); |
結果
赤字の部分が追加されました。
<img src=”image.jpg” alt=”レシピ” title=”フラットレシピ” width=”480″ height=”320″>
複数設定する場合、項目が多いと1行で記述する場合見にくいため、改行して書くと見やすくなるかと思いますが、好みでよいでしょう。
属性の削除
属性を削除する場合はremoveAttr()というメソッドが用意されています。
構文
jQuery
|
1 |
$('div').removeAttr('id'); |
上記の例ではdiv要素のid属性を削除しています。
removeAttr()の引数に削除したい属性を指定するだけです。
href属性を削除するサンプル
a要素のhref属性を削除してみましょう。
HTML
|
1 |
<a href="http://www.flatrecipe.nir87.com">フラットレシピはこちら</a> |
jQuery
|
1 2 3 4 5 6 |
$(function() { //a要素のhrefを削除 $('a').removeAttr('href'); }); |
結果
<a>フラットレシピはこちら</a>
href属性が削除され、リンク先に飛ばなくなります。
classを削除する場合はremoveClass()を使いましょう。
attr()での不具合
attr()で属性がなぜか操作できない場合もあります。
よくあるのがフォーム関連での不具合ですね。
jQueryプロパティはprop()を使う
チェックボックスのチェックの状態や、disabledなどはattr()では操作できない場合が多いようです。
以下のページでもご紹介しましたが、jQuery1.6よりHTML属性はattr()、jQueryプロパティはprop()と役割が明確に分かれました。
参考：jQueryでdisabledの設定･解除･判定する方法
例えば、HTMLにcheckedが設定してあった場合、チェックを外してもcheckedの属性は消えないため不具合となります。
チェックの状態などの動的な操作にはattr()は対応していないため、prop()を使うよう推奨されています。
参考：jQueryでチェックボックスを操作するさまざまな方法
