CSS で div の表示と非表示を切り替える方法

CSS はフロントエンド開発が習得しなければならないスキルの 1 つであり、div の表示と非表示を切り替えることはその重要な部分です。この記事ではCSSでdivの表示・非表示を切り替える方法を詳しく紹介します。

1.display 属性を使用して div の表示と非表示を切り替える

CSS で div の表示と非表示を切り替える最も一般的な方法は、display 属性を使用することです。 Display は要素の可視性と表現可能性を制御でき、必要な隠し div 効果はこの属性を通じて実現されます。

display で一般的に使用される値は、block、inline、inline-block、none などです。そのうちの none は、div を非表示にするためのキーではありません。

CSS コードは次のとおりです。

.hide {
    display: none;
}
.show {
    display: block;
}

非表示は .hide 要素の表示属性を none に設定することで実現され、表示は .show 要素の表示属性を設定することで実現されます。封鎖する。

div の表示と非表示を制御するには、JavaScript または jQuery を使用してこれらの CSS クラスにアクセスし、必要に応じて追加または削除します。

例:

HTML コード:

<button id="hidden_btn">点击隐藏</button>
<div id="hidden_div" class="hide">隐藏文本</div>

JS コード:

$(document).ready(function() {
    $("#hidden_btn").click(function() {
        $("#hidden_div").toggleClass("hide");
        $("#hidden_div").toggleClass("show");
    });
});

ここでは、jQuery の toggleClass() メソッドを使用してクラスを切り替えます。ボタン クリックすると、このメソッドはエディターから .hide クラスを削除し、.show クラスを追加して、div を非表示から表示に切り替えます。

2. 可視性属性を使用して div を表示および非表示にします

可視性属性は、表示属性と同様に、要素の可視性を制御するために使用できます。その一般的な値は次のとおりです。見える、隠れる、崩壊する。

visibility 属性を使用して要素を非表示にしても、その要素は HTML ドキュメント内のスペースを占有し、視覚的に透明または非表示になるだけですが、そのサイズと位置はページ上に残ります。

CSS コードは次のとおりです:

.hide {
    visibility: hidden;
}
.show {
    visibility: visible;
}

CSS コードの例は、display 属性を使用した表示例と似ています。ここでは、JS コードについてのみ説明します:

JSコード:

$(document).ready(function() {
    $("#hidden_btn").click(function() {
        $("#hidden_div").toggleClass("hide");
        $("#hidden_div").toggleClass("show");
    });
});

クラスを切り替えるには、toggleClass() メソッドも使用します。

3. opacity 属性を使用して div を表示および非表示にします

opacity 属性は、要素の透明度を設定するために使用されます。値の範囲は 0.0 ～ 1.0 で、0.0 は、要素は完全に透明であり、1.0 は要素が完全に透明であることを意味し、要素は完全に不透明です。

CSS コードは次のとおりです。

.hide {
    opacity: 0;
    height: 0;
    overflow: hidden;
}
.show {
    opacity: 1;
    height: auto;
}

不透明度属性の使用に加えて、div を非表示にするときにスペースが残る問題を解決するために、高さとオーバーフロー属性も定義します。

非表示クラスを適用すると、div の高さが 0 に設定され、コンテンツが非表示になります。切り替え後に高さを自動的に調整するために、.showクラスで高さをautoに設定し、切り替え時にdivが自動的に調整されて表示されるようにします。

JavaScript コードを見てみましょう:

JS コード:

$(document).ready(function() {
    $("#hidden_btn").click(function() {
        $("#hidden_div").toggleClass("hide");
        $("#hidden_div").toggleClass("show");
    });
});

toggleClass() メソッドも使用します。

4. 概要

CSS で div を表示または非表示にする主な方法は、display 属性、visibility 属性、opacity 属性を使用する 3 つです。実際のアプリケーションでは、特定のニーズに基づいて使用する方法を選択する必要があります。

さらに、可視性と表示を組み合わせた値 (visibility:hidden;display:none) がよく使用されます。この値により、要素が非表示になり、画面スペースを占有しません。これは、display を使用する利点よりも優れています。 :none は、JS コードが呼び出し時に要素の位置情報を取得できることです。ただし、visibility:hidden;display:none が使用されると、要素はクリック イベントに応答しなくなり、アプリケーションに影響を与える可能性があります。したがって、使用する場合は、特定の状況に応じて選択する必要があります。

つまり、開発した Web ページの視覚効果を改善し、ユーザー エクスペリエンスを向上させ、その後の JS 開発のための強固な基盤を築くには、CSS プロパティを習得し、使いこなす必要があります。 。

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