ywork2020.com

Title

要素のid属性値を取得、設定する

目次 (INDEX)

idとは

ここで説明するid とは次の語句からなるjavascriptのプロパティです。
identifier
読み: アイデンティファイア
意味: 識別子

目次に戻る

idプロパティの概要

このプロパティは、要素に付加された id属性 の値を取得、または設定することができます。

id属性 の値は文書内でユニークであることが必要です。 文書内に同一の識別子が存在する場合、エラーの原因となることがあります。 また、文書内に同一の識別子が存在する状態で document.getElementById を使用した場合、このメソッドは最初の要素を取得します。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。

var idStr = Element.id;
Element.id = idStr;

目次に戻る

サンプルコードと実行結果

このサンプルではdiv要素のid属性値を取得してテキストとして出力することと、 id属性値を変更することを同時に行います。

また、id属性値が変更されることでCSSで設定しているスタイルの適用が変わり、背景色が変化します。

サンプルコード: CSS
<style>
	#idElement_Red, #idElement_Blue{
		border: medium dashed ##black;
		color: ##white;
		height: 200px;
		width: 200px;
		text-align: center;
	}
	#idElement_Red{
		background-color: ##red;
	}
	#idElement_Blue{
		background-color: ##blue;
	}
</style>
  • 09-11: idElement_Red (背景色を赤色に設定します。)
  • 12-14: idElement_Blue (背景色を青色に設定します。)
サンプルコード: HTML
<body>
	<div id="idElement_Red">[ innerText ]</div>
	実行:<br>
	<input type="button" value="ボタン" onclick="evtName()" id="idInButton">
</body>
  • 02: div要素 (この要素のid属性値を取得、設定します。)
  • 04: input要素 (この要素をクリックするとscript 03-07のevtName()関数を実行します。)
サンプルコード: script
<script>
	idElement_Red.innerText = idElement_Red.id;
	function evtName(){
		idElement_Red.id = "idElement_Blue";
		idElement_Blue.innerText = idElement_Blue.id;
		idInButton.disabled = true;
	}
</script>
  • 02: idElement_Red (初期設定です。innerTextにidプロパティの値を代入します。)
  • 03-07: evtName()関数 (HTMLの04: がクリックされると、この関数を実行します。)
  • 04: id値の変更 (idElement_Redのid値に"idElement_Blue"を代入します。)
  • 05: idElement_Blue (innerTextにidプロパティの値を代入します。)
  • 06: ボタンの無効化 (idInButtonのdisabledプロパティにtrueを代入します。)
実行結果:
[ innerText ]
実行:

目次に戻る