学習22日目　Javaで画面表示を変える方法

こんばんは、KATUUUNです。ブログは最近始めましたが、実はプログラミング自体は約３週間くらい学習しています。

今日は私の苦手分野、JabaScriptのうち、「画面表示を変える方法」について書こうと思います。

1.表示を変えたいHTMLを指定する

（例）

li class="background-red" id="lists" リスト /li

(今回はidを設定した)

2.JabaScriptファイルがHTMLの要素を所得する

const pullDownButton = document.getElementById("lists")

3.イベントを発火させる

・load：ページ全体が全て読み込まれた後に、イベント発火する

・click：指定された要素がクリックされた時に、イベントが発火する

・mouseover：マウスカーソルが指定された要素上に乗った時に、イベントが発火する

・mouseout：マウスカーソルが指定された要素上から外れた時に、イベントが発火する

(要素)addEventListener("イベント名",関数)を使う

（例）

pullDownButton.addEventListener('mouseover', function(){ ("処理") })

4.どんな変化をつけたいか決める

（例）インラインスタイル追加で変化をつけたい

pullDownButton.addEventListener('mouseover', function(){ pullDownButton.setAttribute("style", "background-color:#FFBEDA;") })

変化をつける方法は他にもいっぱいあります。早く使いこなせるようにないたいです。今日はここまで。ありがとうございました。

KATUUUNs blog