CSSでdivを非表示にしたり表示したりする方法

DIV CSS の表示と非表示を切り替える

DIV は HTML タグの重要な要素であり、テキスト、画像、ビデオなどを表示するために使用できます。 Web デザインでは、特定の要素を非表示または表示する必要がある状況によく遭遇します。そのためには、CSS を使用して DIV を設定する必要があります。この記事ではCSSを使ってDIVを非表示・表示する方法を紹介します。

1. CSS 表示属性

CSS 表示属性は、ページ上での要素の表示方法を制御できます。 display には複数の値があり、一般的に使用されるのは次のとおりです:

1. none: 要素は表示されず、ページ領域を占有しません;
2. block: 要素はブロックレベルを生成しますコンテナ 、幅全体を占め、テキストや画像などのブロックレベルの要素を表示するためによく使用されます;
3. inline: 要素は排他的な行を占有せず、独自の幅と高さのみを占有します。リンクや画像などのインライン要素を表示するためによく使用されます。
4. inline-block: インラインと似ていますが、幅と高さを設定できます。
5. #flex: 柔軟なレイアウトで、柔軟に表示できます。要素のスペースを割り当てます。

CSS の表示プロパティを設定することで、DIV の表示と非表示を切り替えることができます。

以下は説明する例です:

HTML ファイルで、DIV 要素を作成します:

ここでは、 Hide /Displayed content

次に、CSS ファイルで DIV の表示属性を設定します:

#myDiv{

  display:none;   /* 默认隐藏 */

}

# # ページが読み込まれると、DIV 要素は非表示になります。この時点で、マウスをクリックしたときの表示効果を実現するイベントを追加する必要があります。

JavaScript では、要素の style プロパティを設定して要素の非表示と表示を設定することで、CSS の表示プロパティを変更できます。具体的な操作は次のとおりです。

/

要素の取得 / var myDiv = document.getElementById('myDiv');

/

マウスをクリックすると DIV を表示 / function showDiv(){

   myDiv.style.display = 'block';

}

/

マウスをクリックすると DIV /## を非表示にします# function hiddenDiv( ){

   myDiv.style.display = 'none';

}

このようにして、マウスをクリックすると、DIV がブロックレベル要素としてページ上に表示されます。もう一度クリックすると再び非表示になります。

2. CSS 可視性属性

要素の非表示と表示を制御するもう 1 つの属性は可視性です。可視性には、visible (可視) と hidden (非表示) の 2 つの値があります。表示とは異なり、表示設定が非表示に設定されている場合、要素は非表示になりますが、ページ上のスペースを占有します。

HTML ファイルでは、DIV 要素も作成します。

ここに非表示/表示するコンテンツがあります

次に、CSS ファイルで、DIV の可視性属性を設定します。

#myDiv{

  visibility:hidden;   /* 默认隐藏 */

}

ページが読み込まれると、DIV 要素は隠れて立ちなさい。このとき、マウスクリック時の表示効果を実現するイベントを追加する必要があります。

JavaScript では、要素の style 属性を変更することで、要素の Visibility 属性を変更することもできます。具体的なコードは次のとおりです:

/

Get the element

/ var myDiv = document.getElementById('myDiv');
/

Whenマウスをクリックすると DIV を表示

/ function showDiv(){

   myDiv.style.visibility = 'visible';

}

/

マウスをクリックすると DIV

/## を非表示にします# function hiddenDiv( ){

   myDiv.style.visibility = 'hidden';

}

このようにして、マウスをクリックすると DIV が表示されるようになります。もう一度クリックすると再び非表示になります。

3. 概要

Web デザインでは、要素の表示と非表示は非常に一般的な要件です。要素の非表示と表示を制御するには主に 2 つの方法があります。1 つは要素の表示属性を変更することで制御する方法、もう 1 つは要素の可視性属性を変更することで制御する方法です。この 2 つの方法をマスターすることで、さまざまな要素の表示と非表示をより柔軟に制御でき、Web ページの表示効果を向上させることができます。

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