CSSでdivの表示・非表示を制御する方法

DIV CSS の表示と非表示

DIV は HTML で一般的に使用されるタグで、ページを分割し、レイアウトを実装するために使用されます。ページのインタラクティブな効果では、特定の DIV 要素を動的に表示または非表示にする必要がある場合があります。このとき、CSS の表示プロパティを使用して DIV の表示/非表示を制御できます。

1. 表示属性

表示属性は、HTML 要素の表示モードを制御するために使用されます。次の値を指定できます。

1. none

none に設定すると、要素は非表示になり、ページ内にスペースが残りません。

2. block

block に設定すると、要素はブロック レベルの要素として表示されます。つまり、要素は 1 行とコンテナの幅を占めます。満たされています。

3. inline

inline に設定すると、要素はインライン要素として表示されます。つまり、複数の要素を同じ行に表示できます。

4. inline-block

inline-block に設定すると、要素はインライン ブロック レベルの要素として表示されます。つまり、複数の要素をインライン ブロック レベルの要素として表示できます。同じ行であり、要素間にはある程度のスペースがあります。

5. table

table に設定すると、要素は表形式で表示され、要素のレイアウトは表関連の CSS プロパティを使用して制御できます。

上記の値は、DIV 要素の表示属性で使用できます。

2. 基本構文

display 属性を設定することで、DIV 要素を表示または非表示にすることができます。基本的な構文は次のとおりです。

//显示元素
document.getElementById('example').style.display = 'block';

//隐藏元素
document.getElementById('example').style.display = 'none';

上記のコードでは、getElementById を通じて example の ID を持つ DIV 要素を取得し、style.display 属性を設定して要素の表示または非表示を制御します。

3. デモの例

以下では、デモの例を使用して、CSS の表示プロパティを使用して要素の表示または非表示を制御する方法を説明します。

1. DIV 要素を非表示にする

次は DIV 要素です:

<div id="example">Hi,我是DIV元素！</div>

次のコードを使用してこの要素を非表示にできます:

document.getElementById('example').style.display = 'none';

この例では、id example を持つ DIV 要素を取得し、その表示属性を none に設定して、要素を非表示にします。

2. DIV 要素の表示

以前に非表示にした DIV 要素を表示したい場合は、次のコードを使用できます。

document.getElementById('example').style.display = 'block';

この方法で、次のことができます。以前に非表示にした DIV 要素が再表示されます。

3. DIV 要素の表示モードを変更する

先ほど表示属性を説明したときに、ブロック レベル、インライン、インラインブロックレベルおよびその他の要素。この方法で DIV 要素の表示を変更することもできます。

たとえば、次のコードを使用して、DIV 要素をインライン要素に変更できます:

document.getElementById('example').style.display = 'inline';

この方法では、もともと行全体を占めていた DIV 要素が次のようにインラインに配置されます。テキスト。

4. 概要

ページ インタラクション エフェクトでは、要素の表示または非表示を動的に制御する必要があることがよくあります。この機能は、CSS の表示プロパティを使用して簡単に実現できます。簡単な構文を使用して、DIV 要素が実際に存在するかどうかを制御し、その表示方法を変更できます。表示プロパティを変更すると、要素の子孫の表示方法にも影響することに注意してください。

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