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

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

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

JavaScriptを使って、ボタンや要素のクリック時に画面に要素を表示させる方法です。

document.getElementById(“id”).~

「document.getElementById」を使って、要素のidを取得します。

下記のように指定すると、buttonや何か要素をクリックした時にidを取得してCSSのプロパティ値を変更してくれます。

document.getElementById("clickbtn1").style.display = "block";

こちらをベースに、ボタンをクリックしたタイミングで要素を表示させます。

display は CSS のプロパティで、要素をブロック要素とインライン要素のどちらとして扱うか、およびその子要素のために使用されるレイアウト、例えば フローレイアウト、グリッド、フレックスなどを設定します。

https://developer.mozilla.org/ja/docs/Web/CSS/display

要素を非表示にしておく(display:none)

まずは、画面に表示されないように、予め要素を非表示にしておきます。こちらは画像でもdiv要素でもOKです。

<div style="width:200px;height:200px;background:black;"></div>

これで黒色の四角形が表示されるので、display:noneで予め非表示にしておきます。

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

画面から非表示になりました。

あとは、こちらのブロックにidを加えておきます。

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

クリックで関数を実行させる

別のdiv要素にonclick(click イベント)を設置します。

<div style="width:200px;height:40px;background:skyblue;" onclick="clickDeView()">ここを押してね!</div>
ここを押してね!

これで、このボタンをクリックした時に、clickDeViewという関数を実行させることができます。

クリックでCSSが書き換わるJavascript

あとは、clickDeViewの関数内で、CSSを書き換えてあげれば完成です。

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

実行してみます。

ここを押してね!

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

まとめ

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

ご参考ください😃

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