JavaScriptの基礎②(Class要素の操作①)
■JavaScriptでClass要素の操作する方法を解説する
ついでに取得した要素を赤⇔青に変化する方法ついても解説する
ID要素の取得方法はこちら→JavaScriptの基礎①(ID要素取得)
①事前準備として色を変更する為の赤色の正方形を用意する
【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="boxId" class="box">
box
</div>
<script src="main.js"></script>
</body>
</html>
【style.css】
.box {
/* 赤色の正方形 */
height: 100px;
width: 100px;
background: red;
color: white;
/* カーソルをわかりやすく表示 */
cursor: pointer;
/* テキストを中央ぞろえにする */
line-height: 100px;
text-align: center;
}
/* 赤色の正方形を青色に変化させるクラス */
/* JavaScriptの「classList.toggle()」により制御 */
.changeToggle {
background: blue;
}
【main.js】
'use strict';
main.jsに「use strict」を記述する理由はこちら→JavaScriptの厳密チェック
②main.jsに下記を記述して赤色の正方形をクリックする度に青⇔赤に変更する
【main.js】
'use strict';
////赤色の正方形のIDを取得して変数:idに格納
let id = document.getElementById('boxId');
//赤色の正方形をクリックする度に青⇔赤に変更
id.addEventListener('click', function() {
id.classList.toggle('changeToggle');
});
③赤色の正方形をクリックする度に青⇔赤に変化する
box