会員登録(無料)
ログイン
スキルアップは今すぐこちら!▶

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

text JavaScript(ジャバスクリプト)
この記事は約3分で読めます。

前回、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パターン追加すれば出来上がります。

記事の続きを読むにはログインをお願いします。あなたもEGUWEBでスキルアップを!

会員登録は無料です。Googleアカウントでもログインできます。
※会員登録することで利用規約個人情報保護方針に同意したものとみなします。

Googleアカウントで登録・ログイン


タイトルとURLをコピーしました