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

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

目次

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

ボタンを押すと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行目の関数を実行します。
7行目は、getAttributeメソッドで、1行目のテキストボックスのvalueの属性値を取得します。
10,12行目は、setAttributeメソッドで、1行目のテキストボックスのvalueに属性値をセットします。

 

getAttributeメソッド

変数 = 要素.getAttribute(属性名);
  • 引数の属性名で属性値を取得します。
  • 属性とは、<input type="button" value="ボタン">とある場合、typeとvalueが属性名で、"button"と"ボタン"が属性値です。inputは要素です。
  • getAttributeメソッドは、Elementインターフェイスのメソッドです。
  • Attributeは属性という意味です。
  • 以下はMDNのgetAttributeメソッドのリンクです。
    https://developer.mozilla.org/ja/docs/Web/API/Element/getAttribute

setAttributeメソッド

要素.setAttribute(属性名,属性値);
  • 属性名に属性値をセットします。
  • 属性とは、<input type="button" value="ボタン">とある場合、typeとvalueが属性名で、"button"と"ボタン"が属性値です。inputは要素です。
  • 新規の属性名の場合は属性自体を追加します。
  • 属性名が既にある場合は属性値を変更します。
  • setAttributeメソッドは、Elementインターフェイスのメソッドです。
  • Attributeは属性という意味です。
  • 以下はMDNのsetAttributeメソッドのリンクです。
    https://developer.mozilla.org/ja/docs/Web/API/Element/setAttribute

関連の記事

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

△上に戻る