CSS divを表示および非表示にする方法-フロントエンドQ&A-php.cn

CSS divを表示および非表示にする方法

PHPz

リリース： 2023-04-21 13:59:09

オリジナル

1143 人が閲覧しました

CSS は Web ページのスタイル設定に使用される言語で、ページの外観やレイアウトを変更するために使用できます。 CSS では、div 要素を使用して Web コンテンツをグループ化し、これらのコンポーネントにさまざまなスタイルを適用できます。中でもdiv要素の表示・非表示はページのデザインにとても役立ちます。

この記事では、CSS div 要素を使用してページ要素を表示および非表示にする方法について説明します。この記事では次の内容について説明します:

CSS div 要素とは
CSS 表示プロパティ
CSS 可視性プロパティ
使い方ページ要素を表示および非表示にする CSS div 要素

1. CSS div 要素とは

HTML では、div 要素はセマンティクスを持たないブロックレベルの要素です。 Web コンテンツをグループ化するために使用でき、これらのコンポーネントの外観とレイアウトは CSS スタイルを通じて変更できます。

たとえば、Web ページ上に 3 つの異なるコンテンツ要素があるとします。これらの要素の HTML コードは次のとおりです:

<div class="header">头部内容</div>
<div class="content">正文内容</div>
<div class="footer">底部内容</div>

ログイン後にコピー

上記のコードでは、3 つの div 要素を使用してグループ化します。ヘッダー、本文、フッターのコンテンツ。次に、背景色、テキストフォント、境界線などの設定など、CSS スタイルを通じて各 div 要素のスタイルを変更できます。

2. CSS 表示属性

CSS では、表示属性を使用して要素の表示モードを制御できます。その値には次のものが含まれます。

none: 要素は表示されず、ページ領域も占有しません。
block: 要素はブロックレベルの要素として表示され、独自の行を占めます。
inline: 要素はインライン要素として表示され、他のインライン要素と同じ行に表示されます。
inline-block: 要素はインラインブロック要素として表示され、他のインライン要素と同じ行に表示されますが、幅や高さなどの属性を設定できます。

次の例は、CSS 表示プロパティを使用してページ要素を非表示にする方法を示しています。

<div class="box">要隐藏的元素</div>

.box {
  display: none;
}

ログイン後にコピー

上記のコードでは、クラスボックスを持つ div 要素を使用し、その表示属性を none に設定します。これは、この div 要素がページに表示されないことを意味します。

3. CSS 可視性属性

CSS 可視性属性は、要素の表示と非表示を制御するために使用することもできます。 display 属性とは異なり、visibility 属性は要素が表示されるかどうかのみを制御し、ページ上の要素のレイアウトには影響しません。可視性属性のオプションの値は次のとおりです。

visible: 要素は表示されます。これは、表示属性のデフォルト値と同じです。
hidden: 要素は表示されませんが、ページ領域を占有しています。
collapse: テーブル要素に使用します。collapse に設定すると、要素が非表示になり、セルの境界線が消えます。

次の例は、CSS 可視性プロパティを使用してページ要素を非表示にする方法を示しています。

<div class="box">要隐藏的元素</div>

.box {
  visibility: hidden;
}

ログイン後にコピー

上記のコードでは、クラスボックスを持つ div 要素を使用し、その可視性属性を非表示に設定します。これは、div 要素がページに表示されませんが、それでもページ領域を占有することを意味します。

4. CSS div 要素を使用してページ要素を表示および非表示にする方法

上記で CSS の表示プロパティと可視性プロパティを紹介しました。次に、これらのプロパティを組み合わせて、ページ要素をクリックボタンを実装します。ページ。 div 要素を表示または非表示にする機能。

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

<button onclick="toggle()">点击我</button>
<div class="box">要显示或隐藏的元素</div>

ログイン後にコピー

上記のコードでは、ボタン要素を作成し、それに onclick イベントを追加します。また、クラスボックスを使用して div 要素を作成します。これは、非表示または表示する要素です。

次に、次のコードを CSS ファイルに追加します。

.box {
  visibility: hidden;
}

ログイン後にコピー

これにより、ページが読み込まれたときにボックス要素が非表示になります。

最後に、次のコードをページの JavaScript コードに追加します。

function toggle() {
  var box = document.querySelector('.box');
  if (box.style.display === 'none') {
    box.style.display = '';
  } else {
    box.style.display = 'none';
  }
}

ログイン後にコピー

上記のコードでは、toggle() という名前の関数を定義し、ボタンの onclick イベントにバインドします。。関数内では、document.querySelector() メソッドを使用してクラスボックスを持つ要素を取得し、その表示属性が none かどうかを確認します。存在する場合は、その表示プロパティを空の文字列に設定して、ボックス要素を表示します。そうでない場合は、表示プロパティをなしに設定して、ボックス要素を非表示にします。

上記は、CSS div 要素を使用してページ要素を表示および非表示にする方法です。これらのテクニックをマスターすることで、ページをよりダイナミックでインタラクティブにすることができます。

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