ywork2020.com

Title

ゲットエレメントバイアイディ.スタイルでID属性をターゲットにスタイルを変更する

styleプロパティの概要

ドキュメント内(ページ内)から特定のエレメント(要素)を参照して、そのエレメントのスタイルを変更出来ます。
getElementByIdメソッドから参照すると特定のIDを持つエレメントのスタイルを変更出来ます。

実機サンプル

各ボタンを押すと結果を表示します

この文字のスタイルが変更されます

サンプルコード

<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset = "utf-8">
		<title>独学 Webプログラミング! - YWORK</title>
	</head>
	<body>	
		<p>各ボタンを押すと結果を表示します</p>
		<p><input type="button" value="color: red;" onclick="onClick1()"></p><!-- #1 -->
		<p><input type="button" value="color: blue; font-size: 30px;" onclick="onClick2()"></p><!-- #2 -->
		<p id="idAnswer">この文字のスタイルが変更されます</p><!-- #elm -->
		<script type="text/javascript">
			document.open();
			let elmAnswerID = document.getElementById("idAnswer");	//<!-- #elm -->
			function onClick1(){	//<!-- #1 -->
				elmAnswerID.style = 'color: red;';
			}
			function onClick2(){	//<!-- #2 -->
				elmAnswerID.style = 'color: blue; font-size: 30px;';
			}
			document.close();
		</script>
	</body>
</html>

サンプルコードの要点

  1. 条件やイベント発生時に要素のスタイルを変更できる