Javascriptの勉強 1 : 要素の表示、非表示を切り替える処理

- 6月 17, 2019

このブログ記事は個人的な勉強のメモ書き、覚え書き程度のものです。内容の正確性などあまり当てにならない面が多いので、ちゃんとしている情報を知りたい場合は他のサイトを探して下さい。

Javascriptで特定の要素の表示、非表示を切り替える処理

HTMLのコードに、以下のようなHTML要素(div)をあるときは表示、またあるときは非表示にすることを考える。

<div id="test01">

<h2>タイトル1 </h2>

本文1

</div>

また、ここで表示切り替えに以下のチェックボックスを用意する。
<input type="checkbox" onclick="func_show01()" checked>テスト<br>
チェックボックスが押されたときに"func_show01()"関数が実行される。今回考える処理ではチェックボックスがONかOFFかは考慮せず、関数が実行されたときに表示、非表示が切り替わるようにする。
(今回はそうするというだけで、ON、OFF状態を取得して切り替えても良い)

そして、Javascript側の関数での処理は以下のようになる。

 function func_show01() {

  var s = document.getElementById("test01");

  if (s.style.display === "none") {

    s.style.display = "block";

  } else {

    s.style.display = "none";

  }

}

処理の流れとしては
チェックボックスのON、OFFで関数"func_show01()"が実行
↓
関数内でまず要素divのidが"test01"のElementオブジェクトを変数sに取得
↓
style.displayメソッドで変数sの表示、非表示状態を判定
↓
ifにより表示の場合は非表示に、非表示の場合は表示に切り替える"block(表示)"、"none(非表示)"

これによりチェックボックスのON、OFFで要素の表示、非表示を切り替えることが出来る。

実際のファイル

HTML

<!DOCTYPE html>

<html>

<head>

  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

  <meta http-equiv="Content-Style-Type" content="text/css">

</head>

<body>



<input type="checkbox" onclick="func_show01()" checked>テスト<br>

  

<div id="test01">

<h2>タイトル1 </h2>

本文1

</div>



<script src="script01.js"></script>

</body>

</html>

Javascript

function func_show01() {

  var s = document.getElementById("test01");

  if (s.style.display === "none") {

    s.style.display = "block";

  } else {

    s.style.display = "none";

  }

}

このブログを検索

ゆたりんブログ