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

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

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

.test1{
  display: none;
}

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

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

```html

　　非表示にさせたい。！

　 ``` ```css .test1{ display: none; /* ページが読み込まれた時点で非表示 */ } ``` ```javascript 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を作るにあったって画面に動きをつけるのによく使うので覚えておくと様々な応用に使えると思います！