CSS を使用して Web ページ要素の可視性を制御する方法

Web デザインにおいて、CSS はページ スタイルの制御に不可欠な部分です。 CSS では、Web ページの外観を設定するだけでなく、要素の可視性も設定できます。この記事では、CSSを使用してWebページ要素の可視性を制御する方法と、それを実際のプロジェクトに適用する方法を紹介します。

1. CSS は要素の可視性を設定します

CSS には、要素の可視性を制御するための 2 つのプロパティ (visibility と display) が用意されています。用途や効果が異なりますので、以下に分けてご紹介します。

1. visibility 属性

visibility 属性は要素の可視性を設定するために使用され、次の属性値があります:

visible (デフォルト値) ): 要素が表示される;

hidden: 要素は非表示になりますが、要素が占有するスペースは保持されます;

collapse: テーブル要素にのみ使用され、テーブルの行または列を折りたたみます。通常のコンテンツは表示されません。

たとえば、div に Visibility:hidden を設定して非表示にすることができます。

div {
  visibility: hidden;
}

2. display 属性

display 属性は次の目的で使用されます。要素を設定します 表示モードには次の属性値があります:

block: 要素はブロック レベルで表示され、1 つ以上の行を占有します;

inline: 要素はインラインで表示され、表示されます他のインライン要素と並べて表示します。 ;

inline-block: 要素はインライン ブロック レベルで表示され、他のインライン要素と並べて表示されますが、幅や高さなどの属性を設定できます。

span {
  display: none;
}

「トップに戻る」ボタン

<a href="#" id="back-to-top">返回顶部</a>

#back-to-top {
  position: fixed;
  bottom: 50px;
  right: 50px;
  display: none;
}

#back-to-top.show {
  display: block;
}

$(window).scroll(function() {
  if ($(this).scrollTop() > 500) {
    $('#back-to-top').addClass('show');
  } else {
    $('#back-to-top').removeClass('show');
  }
});

テーブルの「表示/非表示」機能

<button id="toggle-table">显示/隐藏表格</button>

<table id="data">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>小红</td>
      <td>20</td>
      <td>女</td>
    </tr>
    <tr>
      <td>小明</td>
      <td>22</td>
      <td>男</td>
    </tr>
  </tbody>
</table>

#data {
  display: none;
}

$('#toggle-table').click(function() {
  $('#data').toggle();
});

display:none を設定すると、要素はそれが占有するスペースを保持しなくなります。したがって、この要素を使用する必要がある場合は、JavaScript で動的に display:block または他の値に変更します。
1. 要素の可視性は、親要素または祖先要素の設定によって影響を受ける場合があります。たとえば、親要素がvisibility:hiddenに設定されている場合、子要素も非表示になります。
2. 要素の可視性制御を乱用しないでください。実際のニーズに応じて設定する必要があります。可視性コントロールを過度に使用すると、コードが乱雑になり、パフォーマンスが低下する可能性があります。

以上がCSS を使用して Web ページ要素の可視性を制御する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。