[JavaScript] 要素のidを変更する

投稿日：2016年10月8日更新日：2018年5月3日

JavaScriptで要素のidを変更することができます。

サンプル

例）ボタンを押すとid="aaa"をid="bbb"に変更する

function changeId(idname){
  var obj = document.getElementById(idname);
  obj.id = "bbb";
}

function changeId(idname){

var obj = document.getElementById(idname);

obj.id = "bbb";

}

#aaa{
  background-color:red;
}
#bbb{
  background-color:blue;
}

#aaa{

background-color:red;

}

#bbb{

background-color:blue;

}

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>サンプル</title>
  <script src="sample.js"></script>
  <link rel="stylesheet" href="sample.css">
</head>
<body>
  <div id="aaa">div領域</div/>
  <input type="button" value="ボタン" onclick="changeId('aaa');" />
</body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

<div id="aaa">div領域</div/>

</body>

</html>

実行サンプル

ボタンを押すと、div領域のidを変更します。

div領域

解説

id変更後のスタイルは、新idのスタイルが即時反映されれます。
id変更後にgetElementByIdでオブジェクトを取得する場合は、変更前のidでは取得できなくなります。

執筆者：とら