JavaScript 属性値を取得/設定するサンプル(getAttributeとsetAttribute)

JavaScriptの属性値を取得/設定するサンプルです。
getAttributeメソッドとsetAttributeを使用します。
属性とは、<input type="button" value="ボタン">とある場合、typeとvalueが属性で、"button"と"ボタン"が属性値です。inputは要素です。

サンプル

getAttributeメソッドとsetAttributeメソッドのサンプルです。
1.「表示」ボタンを押すと、getAttributeメソッドで、テキストボックスの属性値を取得し表示します。(type,value,maxlengthの値)
2.「変更」ボタンを押すと、setAttributeメソッドでテキストボックスのvalueを書き換えます。
→テキストボックスの文言がテスト2に変わります。「表示」ボタンを押すとvalueの表示がテスト2になります。

type: 

value: 

maxlength: 

テキストボックス↓

コード

上記サンプルのコードです。
5-7行目は、getAttributeメソッドで、32行目のテキストボックスの属性を取得しています。
17,19行目は、setAttributeメソッドで、32行目のテキストボックスのvalueの値をセットしています。

<script>
function btn1_click(){
	var t1 = document.getElementById('text1');
	//getAttributeで属性の値を取得
	var str1 = t1.getAttribute("type"); //text
	var str2 = t1.getAttribute("value"); //テスト1 or テスト2
	var str3 = t1.getAttribute("maxlength"); //5

	document.getElementById("s1").innerHTML = str1;
	document.getElementById("s2").innerHTML = str2;
	document.getElementById("s3").innerHTML = str3;
}
function btn2_click(){
	var t1 = document.getElementById('text1');
	//属性の値を変更
	if(t1.value=="テスト1"){
		t1.setAttribute("value","テスト2"); 
	}else{
		t1.setAttribute("value","テスト1"); 
	}
}
function btn3_click(){
	document.getElementById("s1").innerHTML = "";
	document.getElementById("s2").innerHTML = "";
	document.getElementById("s3").innerHTML = "";
}
</script>
<body >
<p>type:<span id="s1"></span></p>
<p>value:<span id="s2"></span></p>
<p>maxlength:<span id="s3"></span></p>
<input type="text" id="text1" value="テスト1" maxlength="5" disabled><br/>
<input type="button" id="b1" value="表示" onclick='btn1_click()'>
<input type="button" id="b2" value="変更" onclick='btn2_click()'>
<input type="button" id="b3" value="クリア" onclick='btn3_click()'>
</body>

getAttributeメソッド

setAttributeメソッド

関連の記事

JavaScript ID値を指定して要素ノードを取得するサンプル(getElementById)
JavaScript タグ名を指定して要素ノードを取得するサンプル(getElementsByTagName)
JavaScript クラス名を指定して要素ノードを取得するサンプル(getElementsByClassName)
JavaScript 相対的な関係でノードを取得するサンプル(childNodes)
JavaScript 要素ノードを追加/削除するサンプル(createElementとremoveChild)
JavaScript ノードを置換するサンプル(replaceChild)

 はまったらエンジニア特化型Q&Aサイト
【teratail(テラテイル)】で質問しましょう!


△上に戻る