jQuery 属性値を取得/設定/削除する(attr/removeAttr)

jQueryの属性値を取得/設定/削除するサンプルです。
attrメソッドとremoveAttrメソッドを使用します。

目次

説明 属性と属性値とattrメソッドの関係
取得/設定 属性値を取得/設定する(attrメソッド)
  複数の属性を同時に設定する(attrメソッド)
  attrメソッドの引数に関数を設定する
削除 属性を削除する(removeAttrメソッド)

属性と属性値とattrメソッドの関係

属性と属性値とattrメソッドの関係についてです。

以下にテキストボックスのhtmlがあるとします。(input type="text"です)

<input type="text" id="text1" value="赤" maxlength="5">

このとき属性と属性値は、黄色の箇所が属性でその右横にあるのが属性値です。inputは要素です。

要素・・・input
属性・・・type,id,value,maxlength
属性値・・・text,text1,赤,5

attrメソッドは、この属性値の取得と設定ができます。

attrメソッドの引数に属性を指定すると、属性値を取得できます。

$("#text1").attr("type"); → textを取得
$("#text1").attr("value"); → 赤を取得
$("#text1").attr("maxlength"); → 5を取得

attrメソッドの1つめの引数に属性を指定し、2つめの引数に属性値を指定すると、属性値を設定できます。

$("#text1").attr("type","属性値");
$("#text1").attr("value","属性値");
$("#text1").attr("maxlength","属性値");

新規の属性の場合は属性自体を追加します。
属性が既にある場合は属性値を変更します。

以下は、MDNの要素と属性のリファレンスです。
https://developer.mozilla.org/ja/docs/Web/HTML/Element
https://developer.mozilla.org/ja/docs/Web/HTML/Attributes

 

属性値を取得/設定するサンプル(attrメソッド)

ボタンを押すとテキストボックスの値が変わります。
attrメソッドでvalueの属性値を取得/設定しています。

コード

上記サンプルのコードです。

<input type="text" id="text1" value="赤" maxlength="5" disabled>
<input type="button" id="button1" value="ボタン1" >

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {

	$("#button1").click(function() {
		// 属性値を取得
		const str1 = $("#text1").attr("value");
		// 属性値を設定
		if(str1==="赤"){
			$("#text1").attr("value","青");
		}else{
			$("#text1").attr("value","赤");
		}
	});
});
</script>

10行目は、IDセレクタ(#text1)で対象を特定(1行目)しattrメソッドで属性のvalueを指定して属性値を取得しています。
13,15行目は、IDセレクタ(#text1)で対象を特定(1行目)しattrメソッドで属性と属性値を指定して属性値を設定しています。

 

複数の属性を同時に設定する(attrメソッド)

attrメソッドで複数の属性を同時に設定するコードです。

<input type="text" id="text1" value="赤" maxlength="5" disabled>
<input type="button" id="button1" value="ボタン1" >

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {

	$("#button1").click(function() {
		// 属性値を取得
		const str1 = $("#text1").attr("value");
		// 属性値を設定
		if(str1==="赤"){
			$("#text1").attr({
				maxlength:5,
				value:"青"
			});
		}else{
			$("#text1").attr({
				maxlength:3,
				value:"赤"
			});
		}
	});
});
</script>

14,15と19,20行目でvalueとmaxlengthの値を同時にセットしています。

 

attrメソッドの引数に関数を設定する

attrメソッドの引数に関数を設定するコードです。

<input type="text" id="text1" value="赤" maxlength="5" disabled>
<input type="button" id="button1" value="ボタン1" >

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {

	$("#button1").click(function() {
		// 属性値を取得
		const str1 = $("#text1").attr("value");
		// 属性値を設定
		if(str1==="赤"){
			$("#text1").attr(
				"value",function(){return "青";}
			);
		}else{
			$("#text1").attr(
				"value",function(){return "赤";}
			);
		}
	});
});
</script>

14,18行目は、attrメソッドの2つめの引数が関数になっています。
関数の戻り値が属性値として設定されます。

 

属性を削除する(removeAttrメソッド)

属性を削除するサンプルです。
removeAttrメソッドを使用します。

<input type="text" id="text1" value="赤" maxlength="5" disabled>
<input type="button" id="button1" value="ボタン1" >

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
	$("#button1").click(function() {

		$("#text1").removeAttr("maxlength");

	});
});
</script>

9行目は、removeAttrメソッドで属性のmaxlengthを削除しています。

attrメソッド

  • jQueryのattrメソッドです。
  • 属性値を取得と設定を行います。
  • 以下はjQueryサイトのattrメソッドのリンクです。
    http://api.jquery.com/attr/

関連の記事

jQuery textメソッドとhtmlメソッドの違いのサンプル
Query 繰り返し処理を行うサンプル(each)
jQuery 子孫要素を検索するサンプル(find)
jQuery 指定のイベント発生時に一度だけ実行するサンプル(one)
jQuery Deferredオブジェクトのサンプル
jQuery 1つの要素に複数のイベントリスナを登録するサンプル(on)

△上に戻る