So verwenden Sie CSS, um die Sichtbarkeit von Webseitenelementen zu steuern

Im Webdesign ist CSS ein wesentlicher Bestandteil der Steuerung des Seitenstils. CSS kann nicht nur das Erscheinungsbild einer Webseite festlegen, sondern auch die Sichtbarkeit von Elementen festlegen. In diesem Artikel erfahren Sie, wie Sie mit CSS die Sichtbarkeit von Webseitenelementen steuern und wie Sie es in tatsächlichen Projekten anwenden.

1. CSS legt die Sichtbarkeit von Elementen fest

CSS bietet zwei Eigenschaften, um die Sichtbarkeit von Elementen zu steuern: Sichtbarkeit und Anzeige. Ihre Einsatzmöglichkeiten und Wirkungen sind unterschiedlich und wir stellen sie im Folgenden gesondert vor.

1. Sichtbarkeitsattribut

Sichtbarkeitsattribut wird verwendet, um die Sichtbarkeit eines Elements festzulegen. Es hat die folgenden Attributwerte:

visible (Standardwert): Das Element ist sichtbar;

hidden: Das Element ist nicht sichtbar. behält aber weiterhin seinen Belegungsraum;

collapse: Wird nur für Tabellenelemente verwendet. Es werden die Zeilen oder Spalten der Tabelle ausgeblendet und der normale Inhalt wird nicht angezeigt.

Zum Beispiel können wir die Sichtbarkeit auf „hidden“ für ein Div festlegen, um es unsichtbar zu machen:

div {
  visibility: hidden;
}

2. display-Attribut

Das display-Attribut wird verwendet, um den Anzeigemodus des Elements festzulegen. Es hat die folgenden Attributwerte:

block: Element wird auf Blockebene angezeigt und belegt eine oder mehrere Zeilen.

inline: Das Element wird inline angezeigt, nebeneinander mit anderen Inline-Elementen.

inline-block: Das Element wird auf Inline-Blockebene angezeigt , wird neben anderen Inline-Elementen angezeigt, kann aber auf Breite, Höhe und andere Attribute eingestellt werden.

keine: Das Element ist unsichtbar und der Platz, den es einnimmt, bleibt nicht erhalten.

Zum Beispiel können wir display:none für eine Spanne festlegen, um es unsichtbar zu machen:

span {
  display: none;
}

2. CSS-Anwendungsbeispiel

1. Schaltfläche „Zurück nach oben“

Bei einigen sehen wir oft „Zurück nach oben“. Websites „Schaltfläche vorhanden, zu diesem Zeitpunkt können wir die Sichtbarkeitssteuerung verwenden, um die Schaltfläche nur dann anzuzeigen, wenn die Seiten-Bildlaufleiste zu einer bestimmten Position gescrollt wurde.

HTML-Teil:

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

CSS-Teil:

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

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

JavaScript (jQuery)-Teil:

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

Der obige Code überwacht die Position der Seiten-Bildlaufleiste und zeigt die Schaltfläche „Zurück nach oben“ an, wenn sie 500 Pixel überschreitet, andernfalls es verbirgt die Schaltfläche.

2. Funktion „Anzeigen/Ausblenden“ der Tabelle

In einigen Fällen, in denen die Datenmenge in der Tabelle groß ist, können wir die Sichtbarkeitssteuerung verwenden, um die Funktion „Anzeigen/Ausblenden“ der Tabelle zu implementieren und so die Benutzererfahrung zu verbessern .

HTML-Teil:

<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>

CSS-Teil:

#data {
  display: none;
}

JavaScript (jQuery)-Teil:

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

Im obigen Code legen wir display:none für das Tabellenelement fest, um es zunächst unsichtbar zu machen. Dann verwenden wir in JavaScript die Methode toggle(), um die Sichtbarkeit der Tabelle umzuschalten, wenn der Benutzer auf die Schaltfläche „Tabelle anzeigen/ausblenden“ klickt.

3. Hinweise

1. Nach dem Festlegen von display:none behält das Element nicht den Platz, den es einnimmt. Wenn Sie dieses Element verwenden müssen, ändern Sie es daher dynamisch in display:block oder einen anderen Wert in JavaScript.
2. Die Sichtbarkeit eines Elements kann durch Einstellungen an übergeordneten oder Vorgängerelementen beeinflusst werden. Wenn das übergeordnete Element beispielsweise auf „visibility:hidden“ gesetzt ist, sind auch die untergeordneten Elemente unsichtbar.
3. Missbrauchen Sie die Sichtbarkeitskontrolle von Elementen nicht, sie sollte entsprechend den tatsächlichen Anforderungen eingestellt werden. Übermäßiger Einsatz von Sichtbarkeitskontrollen kann zu Code-Unordnung und schlechter Leistung führen.

Zusammenfassung

In diesem Artikel haben wir gelernt, wie man CSS verwendet, um die Sichtbarkeit von Webelementen zu steuern. Neben der Verbesserung der Interaktivität und des Benutzererlebnisses der Seite kann die Steuerung der Sichtbarkeit von Elementen auch effektiv den Ressourcenaufwand der Seite einsparen. Daher sollten wir in tatsächlichen Projekten CSS flexibel anwenden, um die Sichtbarkeit von Elementen festzulegen.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie CSS, um die Sichtbarkeit von Webseitenelementen zu steuern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!