プログラミング逆引き辞典

~ 多言語対応のプログラミングレシピ ~

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