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

JavaScriptで要素の表示・非表示を切り替える方法をわかりやすく解説

Webページの開発では、ボタンのクリックに応じて特定の要素を表示したり非表示にしたりする「トグル（切り替え）処理」は非常によく使われるテクニックです。JavaScriptを使えば、style.displayプロパティの値を動的に変更することで、簡単にこの機能を実装できます。

本記事では、ボタンをクリックするたびにdiv要素の表示と非表示が切り替わるサンプルコードを紹介します。

実装のポイント

要素の表示・非表示の切り替えは、以下の手順で行います。

  • document.querySelector()で対象の要素を取得する
  • addEventListener("click", ...)でボタンのクリックイベントを監視する
  • クリックのたびにstyle.displayの値を"none"と"block"の間で入れ替える

display: none;を指定すると要素は画面上から完全に消え、display: block;を指定すると再び表示されます。現在の状態を条件分岐で判定することで、ワンクリックごとに交互に切り替えられる仕組みです。

サンプルコード

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    button {
        padding: 10px;
        border: none;
        background-color: rgb(51, 51, 192);
        color: white;
        font-size: 18px;
    }
    .div-visible {
        width: 100%;
        padding: 50px 0;
        text-align: center;
        background-color: rgb(210, 230, 173);
        margin-top: 20px;
        font-size: 18px;
        font-weight: 500;
    }
</style>
</head>
<body>
<h1>Toggle hide and show example</h1>
<button class="toggleDisplay">Hide Div</button>
<h2>Click on the above button to hide the div below</h2>
<div class="div-visible">
This is a div element
</div>
<script>
    document.querySelector(".toggleDisplay").addEventListener("click", toggleDivDisplay);
    function toggleDivDisplay() {
        var x = document.querySelector(".div-visible");
        if (x.style.display === "none") {
            x.style.display = "block";
        } else {
            x.style.display = "none";
        }
    }
</script>
</body>
</html>

コードの解説

このサンプルでは、クラス名toggleDisplayを持つボタンに対してクリックイベントリスナーを登録し、クリックされるたびに関数toggleDivDisplay()が呼び出されます。

関数内では、まず対象となる.div-visible要素を取得し、その現在のdisplayスタイルが"none"かどうかを判定しています。"none"であれば"block"に変更して要素を再表示し、そうでなければ"none"に変更して要素を隠します。これにより、ボタンを押すたびに表示状態が反転します。

実行結果

上記のコードを実行すると、次のような画面が表示されます。

JavaScriptで要素の表示・非表示を切り替える方法をわかりやすく解説

「Hide Div」ボタンをクリックすると、div要素が非表示になります。

JavaScriptで要素の表示・非表示を切り替える方法をわかりやすく解説

もう一度ボタンをクリックすれば、div要素が再び表示されます。このように、わずか数行のJavaScriptで表示・非表示のトグル機能を実装できるため、アコーディオンメニューやドロップダウンなど、さまざまなUI部品にも応用できます。

  1. JavaScriptとCSSでドラッグ可能なHTML要素を作成する方法

    JavaScriptとCSSを組み合わせることで、マウスで掴んで自由に移動できる「ドラッグ可能なHTML要素」を簡単に実装できます。本記事では、実際に動作するサンプルコードと、その内部処理の仕組みをわかりやすく解説します。 ドラッグ可能なDIV要素のサンプルコード 以下のコードでは、position: absoluteで配置したDIV要素に対して、マウスイベント（mousedown・mousemove・mouseup）を利用してドラッグ機能を実装しています。 <!DOCTYPE html> <html> <style> body {

  2. CSSとJavaScriptでダークモード／ライトモードを切り替える方法を解説！

    ダークモードとは？導入のメリット ダークモードは、夜間や暗い場所での閲覧時に目への負担を軽減できるうえ、有機EL（OLED）ディスプレイ搭載のスマートフォンやPCではバッテリー消費を抑えられる効果も期待できる、近年多くのWebサービスで標準となっている機能です。この記事では、CSSとJavaScriptを組み合わせて、ボタン操作ひとつでダークモードとライトモードを切り替える方法を、実際に動くサンプルコード付きで解説します。 切り替えの仕組み 実装の考え方は非常にシンプルです。まず、ライトモード（白背景・黒文字）のスタイルをbody要素のデフォルトとして定義し、ダークモード（黒背景・白文字）用の