javascript・CSSを使って要素を表示・非表示にする。

javascriptを使ってhtmlの要素を表示・非表示にする方法。

表示されているものを非表示にする方法

<div class='test1'>
　　非表示にさせたい。！
</div>

.test1{
  display: none;
}

非表示にさせたい要素にclassまたはidをつけて上げて display: none;をcssに記述してあげることによって非表示にすることができます。

非表示にさせたものを表示したい。

<div class='test1' id='test1'>              <!-- id名は自由にどうぞ -->
　　非表示にさせたい。！
</div>
<input type='button' value='表示' id='btn'>　  <!--例としてinputを使用しています。 -->

.test1{
  display: none;    /* ページが読み込まれた時点で非表示 */
}

 const Btn = document.getElementById('btn') 　　          // htmlで作成したid=btnを取得
 const test1 = document.getElementById('test1')        // htmlで作成したid=test1を取得

 Btn.addEventListener('click', function(){             // イベントにclickを記述する事によりbtnがクリックされた時というアクションになる
    test1.setAttribute('style', 'display:block;')      // クリックアクション内に記述しているため、クリックされたらcssの記述を追加される
  });

今回はjavascriptとcssを使った記述方法になります。！　個人的には表示・非表示はviewを作るにあったって画面に動きをつけるのによく使うので覚えておくと様々な応用に使えると思います！