Comment utiliser CSS pour contrôler la visibilité des éléments d'une page Web

Dans la conception Web, CSS fait partie intégrante du contrôle du style des pages. En plus de définir l'apparence d'une page Web, CSS peut également définir la visibilité des éléments. Cet article vous expliquera comment utiliser CSS pour contrôler la visibilité des éléments de page Web et comment l'appliquer dans des projets réels.

1. CSS définit la visibilité des éléments

CSS fournit deux propriétés pour contrôler la visibilité des éléments : la visibilité et l'affichage. Leurs utilisations et leurs effets sont différents et nous les présenterons séparément ci-dessous.

1. attribut de visibilité

l'attribut de visibilité est utilisé pour définir la visibilité d'un élément. Il a les valeurs d'attribut suivantes :

visible (valeur par défaut) : l'élément est visible

caché : l'élément n'est pas visible, mais conserve toujours son espace d'occupation ;

collapse : utilisé uniquement pour les éléments du tableau. Il réduit les lignes ou les colonnes du tableau et n'affiche pas le contenu normal.

Par exemple, nous pouvons définir la visibilité : caché pour un div pour le rendre invisible :

div {
  visibility: hidden;
}

2. attribut display

L'attribut display est utilisé pour définir le mode d'affichage de l'élément. Il a les valeurs d'attribut suivantes :

block : élément affiché au niveau d'un bloc, occupant une ou plusieurs lignes ;

inline : l'élément est affiché en ligne, affiché côte à côte avec d'autres éléments en ligne ;

inline-block : l'élément est affiché au niveau d'un bloc en ligne ; , affiché côte à côte avec d'autres éléments en ligne, mais peut être défini sur la largeur, la hauteur et d'autres attributs

aucun : l'élément est invisible et l'espace qu'il occupe n'est pas conservé ;

Par exemple, nous pouvons définir display:none pour une durée pour le rendre invisible :

span {
  display: none;
}

2. Exemple d'application CSS

1. Bouton "Retour en haut"

Nous pouvons souvent voir "Retour en haut" sur certains sites Web "Le bouton existe, nous pouvons actuellement utiliser le contrôle de visibilité pour afficher le bouton uniquement lorsque la barre de défilement de la page a défilé jusqu'à une certaine position.

Partie HTML :

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

Partie CSS :

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

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

Partie JavaScript (jQuery) :

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

Le code ci-dessus surveille la position de la barre de défilement de la page et affiche le bouton "Retour en haut" lorsqu'il dépasse 500 pixels, sinon il cache le bouton.

2. Fonction "Afficher/masquer" du tableau

Dans certains cas où la quantité de données dans le tableau est importante, nous pouvons utiliser le contrôle de visibilité pour implémenter la fonction "afficher/masquer" du tableau afin d'améliorer l'expérience utilisateur .

Partie HTML :

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

Partie CSS :

#data {
  display: none;
}

Partie JavaScript (jQuery) :

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

Dans le code ci-dessus, nous définissons display:none pour l'élément table afin de le rendre invisible initialement. Ensuite, en JavaScript, nous utilisons la méthode toggle() pour basculer la visibilité du tableau lorsque l'utilisateur clique sur le bouton « Afficher/Masquer le tableau ».

3. Notes

1. Après avoir défini display:none, l'élément ne conservera pas l'espace qu'il occupe. Par conséquent, lorsque vous devez utiliser cet élément, modifiez-le dynamiquement pour display:block ou une autre valeur en JavaScript.
2. La visibilité d'un élément peut être affectée par les paramètres des éléments parents ou ancêtres. Par exemple, lorsque l'élément parent est défini sur visibilité:hidden, les éléments enfants seront également invisibles.
3. N’abusez pas du contrôle de visibilité des éléments, il doit être paramétré en fonction des besoins réels. Une utilisation excessive des contrôles de visibilité peut entraîner un encombrement du code et de mauvaises performances.

Résumé

Dans cet article, nous avons appris à utiliser CSS pour contrôler la visibilité des éléments Web. En plus d'améliorer l'interactivité et l'expérience utilisateur de la page, le contrôle de la visibilité des éléments peut également économiser efficacement la surcharge de ressources de la page. Par conséquent, dans les projets réels, nous devons appliquer CSS de manière flexible pour définir la visibilité des éléments.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!