URLをコピーしました!
スキルアップを始める!

【JavaScript】続・ボタンクリックで画面を表示非表示させる方法|style.display

text JavaScript(ジャバスクリプト)
\ワードプレスのスキルアップはこちら!/ WordPress入門読本

前回、JavaScriptを使ってボタンクリック時に画面に要素を表示させる方法をお話しましたが、その続きです。今回はクリックで「表示・非表示」できるようにします。

前回のお話はこちら▼

要素を非表示にする(display:none)

こちらは前回と同じですが、まずは要素が画面に表示されないように予め非表示にしておき、idを加えます。

<div style="width:200px;height:200px;background:black;display:none;" id="clickbtn1"></div>

クリックで画面に表示させる

前回と同じスクリプトのコードです。クリックすると画面にclickbtn1の要素が表示されます。

<script>
function clickDeView(){
document.getElementById("clickbtn1").style.display = "block";
}
</script>

こちらに「非表示にします」を追加して、関数をもう1パターン追加すれば出来上がります。

[rml_read_more]

<div style="width:200px;height:40px;background:skyblue;" onclick="clickDeView()">表示します</div>
<div style="width:200px;height:40px;background:aquamarine;" onclick="clickDeView2()">非表示にします</div>
<div style="width:200px;height:200px;background:yellow;display:none;" id="clickbtn1">表示されました!</div>
<script>
function clickDeView(){
document.getElementById("clickbtn1").style.display = "block";
}
function clickDeView2(){
document.getElementById("clickbtn1").style.display = "none";
}
</script>

これで「表示します」「非表示にします」をそれぞれクリックすると、表示を切り替えることができるようになります。

実行してみます。

表示します
非表示にします

これで、要素をクリックすると、要素の表示・非表示が切り替わります!

まとめ

このような感じで、document.getElementById(“clickbtn1”).style.displayを使うと、画面の要素の表示・非表示を切り替えることができます。

ご参考ください😃

Kindle Unlimited 会員は無料で購読できます
購読はこちら
Kindle Unlimited 会員は無料で購読できます
購読はこちら