JavaScriptの基礎①（ID要素取得）
■JavaScriptでID要素を取得する方法を解説する
ついでに取得した要素をclickした時に色を変更をする方法ついても解説する
完成版はこちら↓
※赤色の正方形をクリックすると青色に変化する
box
①事前準備として色を変更する為の赤色の正方形を用意する
【index.html】
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>JavaScriptの学習</title>
</head>
<body>
<div id="box_id" class="box">
box
</div>
<script src="main.js"></script>
</body>
</html>
【style.css】
.box {
/* 赤色の正方形 */
width: 100px;
height: 100px;
background: red;
color: white;
/* カーソルをわかりやすく表示 */
cursor:pointer;
/* テキストを中央ぞろえにする */
text-align: center;
line-height: 100px;
}
【main.js】
'use strict';
main.jsに「use strict」を記述する理由はこちら→JavaScriptの厳密チェック
②main.jsに下記を記述して赤色の正方形を青色に変更する
【main.js】
'use strict';
//変数を宣言
let changeColor;
//赤色の正方形のIDを取得して変数に格納
changeColor = document.getElementById('box_id');
//赤色の正方形を青色に変更
changeColor.addEventListener('click',function() {
changeColor.style.background = 'blue';
});
③赤色の正方形をクリックすると青色に変化する
box
次はクリックする度に色が変化するようなJavaScriptを解説する→JavaScriptの基礎②（Class要素の操作）