JavaScriptで表示・非表示を切り替える方法

JavaScript は、Web ページに対話性とダイナミクスを追加するために使用できる、広く使用されているスクリプト言語です。多くの Web サイトでは、ユーザーのアクションに基づいて特定の要素やコンテンツを表示または非表示にする必要があるのが一般的です。 JavaScript は、この種のタスクに適したテクノロジです。

ここでは、JavaScript を使用して要素やコンテンツを表示または非表示にする方法と、その使用の長所と短所をいくつか紹介します。

1. 要素を表示および非表示にする従来の方法

以前のバージョンの JavaScript では、要素を表示および非表示にする従来の方法は、「style」属性を変更することでした。要素の「display」属性を変更することで、要素の可視性を変更できます。 「display」属性が「none」に設定されている場合、要素は非表示になり、「block」に設定されている場合、要素は表示されます。以下は例です。

<script>
    function showDiv() {
        document.getElementById("myDiv").style.display = "block";
    }

    function hideDiv() {
        document.getElementById("myDiv").style.display = "none";
    }
</script>

<div id="myDiv">
    This is my hidden div.
</div>

<button onclick="showDiv()">Show the div</button>
<button onclick="hideDiv()">Hide the div</button>

上記のコードでは、JavaScript の getElementById 関数を使用して myDiv 要素を取得し、次に showDiv##display 属性は # 関数と hideDiv 関数で変更され、要素を表示または非表示にする効果が得られます。

この方法の利点は、シンプルで理解しやすいことであり、jQuery やその他の JavaScript ライブラリがない状況に適していることです。ただし、要素のアニメーションをスムーズに制御できないという欠点があり、表示または非表示しか確認できないことです。

jQuery を使用して要素を表示および非表示にする

jQuery は、一般的に使用される JavaScript ライブラリです。このようなコーディング作業を大幅に簡素化できます。次のコードでは、jQuery の

hide() 関数と show() 関数を使用して要素を非表示にしたり表示したりできます。

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    function showDiv() {
        $("#myDiv").show();
    }

    function hideDiv() {
        $("#myDiv").hide();
    }
</script>

<div id="myDiv">
    This is my hidden div.
</div>

<button onclick="showDiv()">Show the div</button>
<button onclick="hideDiv()">Hide the div</button>

上記のコードでは、次のように示します。または、jQuery の

show() 関数と hide() 関数を使用して、myDiv 要素を非表示にします。このメソッドは要素をスムーズに表示または非表示にするだけでなく、jQuery は生の JavaScript よりも理解されており読みやすいため、明示的なコードの可読性と保守性の点で他のメソッドよりも優れています。

3. CSS クラスを使用して要素を表示および非表示にする

CSS では、クラスを使用してスタイルを定義できます。 JavaScript では、

classList 属性、add() および remove() メソッドを使用して要素のクラスを変更できます。この利点は、style 属性を変更せずに要素の表示状態を制御できることです。

以下は例です:

<script>
    function toggleDiv() {
        var myDiv = document.getElementById("myDiv");
        myDiv.classList.toggle("hidden");
    }
</script>

<style>
    .hidden {
        display: none;
    }
</style>

<div id="myDiv">
    This is my div.
</div>

<button onclick="toggleDiv()">Toggle the div</button>

上記のコード スニペットでは、要素の "display" 属性を "none" に設定する CSS クラス "hidden" を定義し、その

classList 属性と toggle() メソッドは、クラスの追加または削除に使用されます。ボタンをクリックすると、myDiv 要素の「hidden」クラスが追加または削除され、それによって要素の表示または非表示の状態が制御されます。

このアプローチの利点は、JavaScript でスタイルを記述する必要がなく、HTML/CSS を適切に分離できることです。欠点は、HTML と CSS に慣れていない開発者にとっては、より多くの学習が必要になる可能性があることです。

CSS アニメーションを使用して要素を表示および非表示にする

JavaScript を使用するだけでなく、CSS アニメーションを使用して要素を表示および非表示にすることもできます。このアプローチにより、表示または非表示の遷移をスムーズに制御して、よりエレガントなユーザー エクスペリエンスを生み出すことができます。

これは例です:

<style>
    #myDiv {
        opacity: 1;
        transition: opacity 0.5s ease-in-out;
        /* 设置 opacity 过渡时间为0.5秒，以及其中断点的加速度 */
        visibility: visible;
    }
    #myDiv.hidden {
        opacity: 0;
        visibility: hidden;
    }
</style>

<script>
    function toggleDiv() {
        var myDiv = document.getElementById("myDiv");
        myDiv.classList.toggle("hidden");
    }
</script>

<div id="myDiv">
    This is my div.
</div>

<button onclick="toggleDiv()">Toggle the div</button>

上記のコードでは、CSS アニメーションを使用して要素の「不透明度」プロパティを変更し、スムーズな遷移を実現します。また、

myDiv 要素が「visibility」属性を使用して非表示になっている場合でも、スペースを占有しないようにします。 JavaScript で classList を使用して、「非表示」クラスの追加または削除の操作を制御します。

この方法の利点は、より優れたトランジション効果を作成してユーザー エクスペリエンスを向上できることです。欠点は、経験豊富な開発者であっても、実装にはより多くのコードが必要になることです。この方法はさらに面倒になる可能性があります。

概要

JavaScript を使用する場合、要素の表示状態を制御する方法は数多くあります。従来の方法では、要素の表示または非表示をスムーズに制御できます。jQuery および CSS クラスを使用すると、コードの制御と保守が容易になり、CSS アニメーションを使用すると、よりスムーズでエレガントなトランジション効果を作成できます。どの方法を使用するかを選択するときは、特定の問題と個人のニーズに基づいて比較検討し、選択する必要があります。

以上がJavaScriptで表示・非表示を切り替える方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。