[JavaScript]getAttributeで属性値を取得する

2021年12月13日

書式
type属性値の取得
document.getElementById(セレクターID).getAttribute(“type");
value属性値の取得
document.getElementById(セレクターID).getAttribute(“value");
maxlength属性値の取得
document.getElementById(セレクターID).getAttribute(“maxlength");
type属性値の設定
document.getElementById(セレクターID).setAttribute(“type","属性値");
value属性値の設定
document.getElementById(“セレクターID).setAttribute(“value","属性値");
maxlength属性値の設定
document.getElementById(セレクターID).setAttribute(“maxlength","属性値");

使用例

<div>属性の値: <span id="cft"></span></div>
<input type="text" id="name" value="山田" maxlength="15">
<!--ボタンを押すとfunA関数を呼び出す -->
<input type="button" value="テスト" onclick="funA()">

<script>
function funA(){
  //getAttributeメソッドでvalueの属性値を取得
      const k = document.getElementById("name").getAttribute("value"); 
    //setAttributeメソッドでvalueに属性値をセット
      document.getElementById("cft").textContent = k +"arkgame";
}
</script>

動作確認
[テスト]ボタンをクリックすると、テキストボックスのvalueの属性値をセレクター「cft」に設定します