ディクシデ

Div CSS の非表示

Web 開発では、多くの場合、一部の要素を非表示にする必要があります。一般的なものには、ポップアップ、ドロップダウン メニュー、サイドバーなどを非表示にすることが含まれます。これらの機能を実現するにはさまざまな方法がありますが、今回は CSS を使用して要素を非表示にする方法を学びます。

CSS には、要素を非表示にするためによく使用されるプロパティが 2 つあります。それは、表示と可視性です。使用方法が若干異なるため、以下で個別に説明します。

1. display 属性

display 属性は、要素を表示するかどうか、表示方法など、要素の表示モードを制御できます。このうち、display: none は、位置やスペースを占有せずに要素を完全に非表示にすることができます。この属性を使用すると、要素はページに表示されず、JavaScript を介してアクセスできません。

次に、display 属性を使用して要素を非表示にする方法を見てみましょう:

<!-- HTML 代码 -->
<div id="element">这是一个元素</div>

/* CSS 代码 */
#element {
  display: none;
}

上記のコードは、display 属性を使用して、要素の ID を持つ要素を非表示にします。この要素はページには表示されず、スペースも占有しません。要素を再表示するには、表示プロパティを別の値に設定するだけです。

display 属性には、display: none に加えて、inline、block、inline-block などの他の値もあり、実際の状況に応じて選択できます。次の例では、表示属性の値を変更することで要素の表示モードを変更します。

<!-- HTML 代码 -->
<div id="element">这是一个元素</div>

/* CSS 代码 */
#element {
  display: inline-block;
}

上記のコードは、要素の ID を持つ要素の表示属性を inline-block に設定します。つまり、インラインブロックのレベル要素が表示されます。ここでの要素は非表示および表示されるだけであり、完全に削除されるわけではないことに注意してください。

2. visibility 属性

visibility 属性でも要素の表示と非表示を制御できますが、display 属性とは異なり、visibility 属性を使用して非表示にした要素もスペースを占有します。ただ見えないだけです。要素が元の位置のスペースを占める必要があるが、表示されない場合は、visibility 属性を使用できます。

以下は、visibility 属性を使用して要素を非表示にする例です:

<!-- HTML 代码 -->
<div id="element">这是一个元素</div>

/* CSS 代码 */
#element {
  visibility: hidden;
}

上記のコードは、visibility 属性を使用して id 要素を持つ要素を非表示にしますが、要素は依然として位置を占めています。ページ上で。 display 属性と同様に、visibility 属性にも、visible (デフォルト値、要素が表示されることを示す) や Collapse (テーブル要素に使用され、セルが非表示で結合されることを示す) などの他の値もあります。

#結論

display 属性と Visibility 属性を使用すると、要素の表示と非表示の機能を簡単に実現できます。これらの属性の適用は、要素の非表示に限らず、要素の表示モードやスタイルの調整などにも柔軟に利用できます。 Web ページを開発するときは、ニーズに基づいて柔軟に選択できます。

以上がディクシデの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。