jquery attrメソッド

TOPページに戻る > jquery入門

スポンサード リンク

jquery attr()メソッド

attrメソッドは、指定した要素の属性の値を取得することが出来ます
引数に指定した属性と値を記入すると属性の値を変更できます

属性の値を取得する方法
$("属性の値を変更する要素").attr("属性");
属性の値を変更する方法
$("属性の値を変更する要素").attr("属性名","値");

指定した要素の属性の値を引数に指定した属性の値に変更します

この場合は、id属性の値を変更して色のCSSを適用させました

jquery

$(function() {
	$("#hoge").attr("id","blue");
});

html

<span id="hoge">変更前の要素</span>

css

#blue { color: blue;}

サンプル

変更前の要素



実行後のhtml

id属性の値が#hogeから#blueへ変更されたことによりcssで指定した文字の色に変更しました 上サンプルの実行後は、id属性の値がblueに変更になっています。
<span id="blue">変更前の要素</span>

指定した要素の属性の値を取得する

引数に属性名のみを指定した場合、指定した要素の属性の値を取得できます
$("属性の値を取得する要素").attr("属性名");

jquery

$(function() {
	$("span#hoge3").attr("id");
});

html

<span id="hoge3">属性の値を取得する要素</span>

実行前

属性の値を取得する要素

取得できたか試してみます

id属性の値(hoge3)を取得できていればテキストが変化するはずです
span#hoge4のテキストをtextメソッドで先ほど取得した属性の値に変更します
下記の場合は、jqueryオブジェクトとして取得した値を使っています
$(function() {
	var foo = $("#hoge3").attr("id");
	$("#hoge4").text(foo);
});

html

<span id="hoge4"></span>

サンプル

取得した値は










(C)2012 ホームページ作成無料