JavaScript 属性値を取得/設定する(getAttribute/setAttribute)

JavaScriptの属性値を取得/設定するサンプルです。
getAttributeメソッドとsetAttributeを使用します。

目次

説明 属性と属性値とgetAttribute/setAttributeメソッドの関係
取得/設定 属性値を取得/設定するサンプル
削除 属性値を削除する
確認 属性値があるか確認する

属性と属性値とgetAttribute/setAttributeメソッドの関係

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

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

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

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

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

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

getAttribute("type"); → textを取得
getAttribute("value"); → 赤を取得
getAttribute("maxlength"); → 5を取得

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

setAttribute("type","属性値");
setAttribute("value","属性値");
setAttribute("maxlength","属性値");

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

 

属性値を取得/設定するサンプル

ボタンを押すとgetAttributeメソッドでテキストボックスのvalueの属性値を取得し、setAttributeメソッドでテキストボックスのvalueを書き換えます。

コード

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

<input type="text" id="text1" value="赤" maxlength="5" disabled>
<input type="button" value="ボタン" onclick="clickBtn1()">

<script>
function clickBtn1(){
	const text1 = document.getElementById("text1");
	// 属性値を取得
	const str1 = text1.getAttribute("value");

	// 属性値を設定
	if(str1=="赤"){
		text1.setAttribute("value","青"); 
	}else{
		text1.setAttribute("value","赤"); 
	}
}
</script>

2行目のボタンをクリックすると5行目の関数を実行します。
8行目は、getAttributeメソッドで、1行目のテキストボックスのvalueの属性値を取得します。
12,14行目は、setAttributeメソッドで、1行目のテキストボックスのvalueに属性値をセットします。

 

属性値を削除する

属性値を削除するサンプルです。

<input type="text" id="text1" value="赤" maxlength="5" >
<input type="button" value="ボタン" onclick="clickBtn1()">

<script>
function clickBtn1(){

	const text1 = document.getElementById("text1");

	text1.removeAttribute("maxlength");
}
</script>

7行目は、getElementByIdで要素を取得しています。
9行目は、1行目のテキストボックスの属性のmaxlengthを削除しています。

以下は実行後のイメージです。maxlengthが削除されています。

 

属性値があるか確認する

属性値があるか確認するサンプルです。

<input type="text" id="text1" value="赤" maxlength="5" >
<input type="button" value="ボタン" onclick="clickBtn1()">

<script>
function clickBtn1(){

	const text1 = document.getElementById("text1");

	if (text1.hasAttribute("maxlength")){
		console.log("あります");
	}
}
</script>

9行目は、hasAttributeメソッドで属性のmaxlengthが存在するか確認しています。
存在しているのでtrueになります。

getAttributeメソッド

変数 = 要素.getAttribute(属性名);

setAttributeメソッド

要素.setAttribute(属性名,属性値);

関連の記事

JavaScript ID属性で取得/設定する(getElementById)
JavaScript タグ名で取得/設定する(getElementsByTagName)
JavaScript クラスで取得/設定する(getElementsByClassName)
JavaScript 全ての子の要素を取得/設定する(children)
JavaScript 要素を追加/削除する(createElement他)
JavaScript ノードを置換するサンプル(replaceChild)

△上に戻る