css div 表示 div を隠す

CSS の

DIV による DIV の表示と非表示

DIV は、HTML で最もよく使用される要素の 1 つで、Web ページでさまざまなレイアウトやコンテナを作成するために使用できます。 CSS では、DIV を使用して他の DIV を表示または非表示にすることも効果的な手法です。この記事ではCSSを使ってDIVを表示・非表示にする方法を紹介します。

DIV 要素の表示

DIV 要素を表示するには、CSS 属性の表示を使用してその表示モードを制御できます。表示属性には、一般的に使用される 4 つの値タイプがあります。

1. block: 要素をブロックレベルの要素として表示します。
2. inline-block: 要素をインライン ブロック要素として表示します (インライン要素に似ていますが、ブロック レベル要素の特性を備えています)。
3. inline: 要素をインライン要素 (テキストなど) として表示します。
4. none: 要素を非表示にし、ページ上のスペースを占有しません。

たとえば、次の CSS スタイルは、ID「demo」を持つ DIV 要素をブロックレベル要素として表示します:

demo {

display: block;

}

もちろん、表示属性の値の型を「inline-block」または「inline」に変更するだけで、インライン ブロック要素またはインライン要素として表示することもできます。

DIV 要素を非表示にする

DIV 要素を非表示にするには、次に示すように、スタイル表示属性の値の型を「none」に設定するのが最も一般的な方法です。

demo {

display: none;

}

このメソッドは、対象の DIV 要素を完全に消去することができます。JavaScript などを使用して値を取得しても、内容は取得できません。 。 DOM 要素の表示を「なし」に設定すると、高さと幅を設定してもページ上に表示されなくなります。

もちろん、visibility 属性を使用するなど、他の方法を使用して DIV 要素を非表示にすることもできます。可視性属性の値のタイプは次のとおりです。

1. visible: 要素は表示されます。
2. hidden: 要素は表示されませんが、ページ上の位置を占めます。
3. collapse: テーブルに使用すると、要素が折りたたまれます。

たとえば、次の CSS スタイルは、ID「demo」を持つ DIV 要素を非表示に設定します:

demo {

visibility: hidden;

}

この時点では、DIV 要素は表示されませんが、ページ上の位置を占めており、JavaScript またはその他のメソッドを使用してそのプロパティにアクセスすると、引き続き表示されます。

JavaScript を使用して DIV 要素の表示と非表示を制御する

場合によっては、JavaScript を使用して DIV 要素の表示と非表示を制御する必要があります。現時点では、DOM API によって提供される style 属性を使用して、要素の CSS スタイルを変更できます。たとえば、次の JavaScript コードは、ID「demo」を持つ DIV 要素を表示します。

document.getElementById("demo").style.display = "block";

Same 、we非表示にすることもできます:

document.getElementById("demo").style.display = "none";

style 属性はインライン スタイルにのみアクセスでき、外部にはアクセスできないことに注意してください。スタイル シートおよび埋め込みスタイル シートにはアクセスできません。外部スタイル シートを使用して要素のスタイルを制御する場合は、DOM API を介してリンク要素を操作するなど、他のメソッドを使用してスタイル シートを変更する必要があります。

概要

CSS で DIV 要素を使用して他の要素を表示または非表示にすることは、非常に実用的なテクノロジです。動的な Web ページ効果を作成したり、広告やコンテンツを非表示にしたり、JavaScript を使用して制御要素、ステータスなど表示属性と可視属性の値の種類は大きく異なるため、特定の実装効果に基づいて選択する必要があることに注意してください。

JavaScript を使用して要素のスタイルを制御する場合、さまざまなプラットフォームやデバイスのサポートを向上させるために、ブラウザーの互換性の問題に注意する必要があります。同時に、コードの保守性とパフォーマンスを向上させるために、可能な限り CSS を使用して要素のスタイルを制御することをお勧めします。

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