KeisukeYamazaki
10/7/2019 - 3:21 AM

jQuery 属性値を取得/設定するサンプル(attr)

jQuery 属性値を取得/設定するサンプル(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>

$(function() {

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

//上記のコードで属性値を取得する場合、attrメソッドの引数に属性を指定
$("#text1").attr("type"); → textを取得
$("#text1").attr("value"); → 赤を取得
$("#text1").attr("maxlength"); → 5を取得

// 属性を設定する場合は以下の通り
$("#text1").attr("type","属性値");
$("#text1").attr("value","属性値");
$("#text1").attr("maxlength","属性値");