JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

ボタンクリック時にJavaScriptでdivを非表示にする方法をわかりやすく解説

Webページを作成していると、ボタンをクリックしたタイミングで特定の要素を表示・非表示に切り替えたい場面はよくあります。この記事では、JavaScriptのstyle.displayを使って、ボタンクリック時にdiv要素を非表示にする方法を具体的なコード例とともに解説します。

基本となるdiv要素の準備

まず、操作対象となる以下のようなdiv要素を用意します。

<div id="showOrHide">
Welcome in JavaScript
</div>

次に、クリックすると上記のdivが非表示になるボタンを配置します。onclick属性に関数名を指定するのがポイントです。

<button onclick="showOrHideDiv()">Click The Button</button>

style.displayを使った表示・非表示の切り替え

JavaScriptで要素を非表示にするには、element.style.displayの値を操作します。"none"を設定すると要素が非表示になり、"block"を設定すると再び表示されます。

さらに便利なのが、現在の状態を判定してトグル（切り替え）動作を実現する方法です。displayの値が"none"なら"block"に、それ以外なら"none"に変更することで、クリックするたびに表示・非表示が交互に切り替わります。

完全なサンプルコード

以下が動作する完全なHTMLコードです。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<button onclick="showOrHideDiv()">Click The Button</button>
<div id="showOrHide">
Welcome in JavaScript
</div>
<script>
    function showOrHideDiv() {
        var v = document.getElementById("showOrHide");
        if (v.style.display === "none") {
            v.style.display = "block";
        } else {
            v.style.display = "none";
        }
    }
</script>
</body>
</html>

コードのポイント解説

  • document.getElementById()：id属性「showOrHide」を持つdiv要素を取得します。
  • v.style.display === "none"：現在非表示かどうかを判定します。
  • 条件分岐：非表示なら表示（block）に戻し、表示中なら非表示（none）にします。これにより毎回同じボタンで開閉が可能になります。

プログラムの実行方法

上記のコードを「index.html」などの任意のファイル名で保存し、VS Codeをお使いの場合はファイルを右クリックして「Open with Live Server」を選択すると、ブラウザで簡単に実行できます。

実行結果

ページを読み込むと、ボタンと「Welcome in JavaScript」というテキストが表示されます。

ボタンクリック時にJavaScriptでdivを非表示にする方法をわかりやすく解説

ここでボタンをクリックすると、div要素が非表示になります。

ボタンクリック時にJavaScriptでdivを非表示にする方法をわかりやすく解説

もう一度ボタンを押せば、テキストが再び表示されます。このようにstyle.displayを使えば、追加のライブラリに頼らずとも手軽に表示・非表示のトグル機能を実装できます。

  1. JavaScriptでボタンをクリックしたらテキストフィールドを空にする方法

    Web開発では、ボタンをクリックしたタイミングでテキストフィールド（テキストボックス）の中身を空にしたいケースがよくあります。たとえば、検索条件のリセットやフォーム入力内容の初期化などが代表例です。この記事では、JavaScriptを使ってこの処理をシンプルに実現する方法を解説します。 基本の考え方 実装に必要なのは、次の2つのステップだけです。 HTML側でonclick属性を使い、ボタンクリック時に呼び出すJavaScriptの関数を指定する 関数内でdocument.getElementById()によって対象の要素を取得し、そのvalueプロパティに空文字列（）を代入する docu

  2. JavaScriptでdiv要素のスクリーンショットを撮る方法!html2canvasの使い方を徹底解説

    Web開発において、サイトのレイアウトを構成するHTML要素の一部を画像としてキャプチャし、その画像を保存したり別の用途に活用したいというニーズはよくあります。本記事では、JavaScriptを使ってdiv要素などをスクリーンショットとして撮影する方法を解説します。 html2canvasライブラリを使う 今回の要件はcanvas要素だけでなく、任意のHTML要素をキャプチャ対象とする点がポイントです。CSSによる描画結果を自力で再現しようとすると実装が非常に複雑になるため、ここではサードパーティ製ライブラリのhtml2canvasを利用します。 html2canvasは、その名の通り指定した