jQueryを使ってHTMLの属性を操作する方法です。
HTML属性は画像を表示させるタグ <img> の画像を指定する src などのことをさします。
id や class も属性です。
プロパティとも呼ばれます。（僕はプロパティのほうが馴染むのでプロパティと呼びます。）
これを利用すれば画像を動的に変更したり、リンク先の href プロパティを変更したり出来ます。
プロパティ名を指定して値を取得する
HTMLのプロパティの値を取得するには attr() を使います。
引数にはプロパティ名を入れます。
以下のようなHTMLの画像を表示するタグがあるとします。
<img id="idname" src="/images/logo.jpeg" alt="ロゴ画像" />
この画像の src プロパティの値を取得する方法は以下のように書きます。
var v = $("#idname").attr("src");
idname というIDを持つタグの src というプロパティの値を取得するということです。
これを実行すると v には “/images/logo.jpeg” という値が入ります。
alt プロパティの値を取得する場合は以下のように書きます。
var v = $("#idname").attr("alt");
これを実行すると v には “ロゴ画像” という値が入ります。
指定したHTML要素に、指定したプロパティが存在しない場合には undefined が返ってきます。
属性を追加する
HTMLのプロパティの値を追加するには attr() を使います。
取得時にも同じ attr() を使いましたが、引数の数で動作が変わります。
第一引数にはプロパティ名、第二引数には値をセットします。
<img id="idname" src="/images/logo.jpeg" alt="ロゴ画像" />
上の画像を表示するHTMLに対し画像の横幅を指定する width プロパティに 200 という値を設定しようと思います。
その場合は以下のように書きます。
$("#idname").attr('width', '200');
複数のプロパティを同時に追加するには以下のように書きます。
$("#idname").attr({
'width': '200',
'height': '50'
});
プロパティ名を指定してプロパティを削除する
プロパティを削除する場合は removeAttr() を使います。
引数にはプロパティ名を入れます。
<img id="idname" src="/images/logo.jpeg" alt="ロゴ画像" width="200" height="50" />
上のHTMLの height プロパティを削除する場合は以下のように書きます。
$("#idname").removeAttr("height");
複数のプロパティを同時に削除する場合には以下のように書きます。
$("#idname").removeAttr("width height");
追加のときとは違い、1つの文字列の引数の中にスペース区切りで削除したいプロパティ名を書きます。
指定したプロパティが存在するかどうか判定
さきほどもちょろっと説明しましたが、指定したHTML要素に、指定したプロパティが存在しない場合には undefined が返ってきます。
つまり以下のような条件分岐が出来ます。
var v = $("#idname").attr("width");
if(v == undefined) {
// 存在しない場合の処理
} else {
// 存在する場合の処理
}
まとめ
HTMLのプロパティは、属性とも呼び、srcやhrefなどのこと。
プロパティ値の取得は、var v = $(セレクタ).attr(プロパティ名);
プロパティの設定は、$(セレクタ).attr(プロパティ名, 値);
複数設定する場合は、$(セレクタ).attr({プロパティ名: 値, プロパティ名: 値, プロパティ名: 値});
プロパティを削除する場合は、$(セレクタ).removeAttr(プロパティ名);
複数削除する場合は、$(セレクタ).removeAttr(プロパティ名 プロパティ名 プロパティ名);
コメント