Comment implémenter la fonction masquer et afficher les éléments en CSS

Dans le développement Web, nous avons souvent besoin d'utiliser du CSS pour contrôler le masquage et l'affichage des éléments. Cela peut nous aider à optimiser la mise en page, à améliorer l'expérience utilisateur et à obtenir différents effets interactifs. Cet article présentera comment utiliser CSS pour masquer et afficher des éléments, ainsi que quelques scénarios d'application pratiques.

css contrôle l'affichage et le masquage des éléments

En CSS, il existe plusieurs propriétés qui peuvent nous aider à contrôler l'affichage et le masquage des éléments, notamment affichage, visibilité et opacité. display、visibility和opacity。

display属性

display属性是最常用的控制元素隐藏显示的方法。这个属性可以指定元素在页面上是显示还是隐藏，并且可以控制元素的布局方式。display属性的值有多种，以下是一些常用的值及其含义：

• none：完全隐藏元素，并且不占用页面空间
• block：元素以块状显示，并占用整个父容器的宽度，每个块与前后元素换行
• inline：元素以行内方式显示，并且会受到其他行内元素的影响，但不会破坏文本的流
• inline-block：元素以行内块状方式显示，类似inline，但是可以指定自身的宽高和边距

除了上面列举的这些值，display属性还可以接受其他值，包括flex、grid和table等，这些值可以实现更加灵活的布局。

visibility属性

visibility属性用于控制元素的可见性，但是元素隐藏后仍然会占用页面空间。这个属性的值只有两种：

• visible：元素可见
• hidden：元素隐藏，但仍占用页面空间

相较于display属性，visibility属性的影响更少，通常用于实现一些文本和图片的动画效果。

opacity属性

opacity

attribut d'affichage

L'attribut display est la méthode la plus couramment utilisée pour contrôler le masquage et l'affichage des éléments. Cet attribut peut spécifier si l'élément est affiché ou masqué sur la page et peut contrôler la disposition de l'élément. Il existe de nombreuses valeurs pour l'attribut display. Voici quelques valeurs couramment utilisées et leurs significations :

• aucun : masque complètement l'élément et n'occupe pas l'espace de la page<.>
• block : L'élément est affiché sous la forme d'un bloc et occupe toute la largeur du conteneur parent. Chaque bloc est enveloppé par les éléments précédents et suivants
• inline : l'élément est affiché en ligne et sera affecté par d'autres éléments en ligne, mais ne détruira pas le flux de texte
• inline-block : L'élément est affiché dans un bloc en ligne, similaire à inline, mais peut être spécifié avec ses propres largeur, hauteur et marge

En plus des valeurs répertoriées ci-dessus, l'attribut d'affichage peut également accepter d'autres valeurs, y compris flex, grid et table, etc., ces valeurs peuvent obtenir une mise en page plus flexible.

attribut de visibilité

L'attribut visibilité est utilisé pour contrôler la visibilité des éléments, mais l'élément occupera toujours l'espace de la page une fois masqué. Il n'y a que deux valeurs pour cet attribut :

• visible : L'élément est visible
• caché : L'élément est caché, mais prend toujours de l'espace sur la page

Comparé à l'attribut display, l'attribut visibilité a moins d'impact et est généralement utilisé pour réaliser une animation effets de certains textes et images.

Attribut opacity

L'attribut opacity est utilisé pour contrôler la transparence d'un élément. Sa valeur est un nombre compris entre 0 et 1. 0 signifie complètement transparent et 1 signifie complètement opaque. En modifiant la transparence des éléments, nous pouvons obtenir des effets de fondu d'entrée et de sortie.

Comment masquer et afficher des éléments en CSS

En plus des propriétés introduites ci-dessus, nous pouvons également masquer et afficher des éléments en définissant des noms de classe. Plus précisément, nous pouvons définir un nom de classe pour l'élément, puis contrôler l'affichage et le masquage de l'élément en ajoutant ou en supprimant ce nom de classe.

Ce qui suit est un exemple de la façon d'afficher ou de masquer un élément div en cliquant sur un bouton :

<button id="b">点击我</button>
<div id="hideDiv" class="hide">这是一个隐藏的div</div>

.hide {
  display: none;
}

var button = document.getElementById('b');
var hideDiv = document.getElementById('hideDiv');

button.onclick = function() {
  if (hideDiv.classList.contains('hide')) {
    hideDiv.classList.remove('hide');
  } else {
    hideDiv.classList.add('hide');
  }
}

Dans le code ci-dessus, nous définissons l'attribut d'affichage de l'élément div masqué sur none via CSS, puis ajoutons un nom de classe à cela. Dans le code javascript, nous écoutons l'événement click du bouton et déterminons s'il faut supprimer ou ajouter son nom de classe caché en jugeant le nom de classe de l'élément div à chaque fois que vous cliquez sur celui-ci.

Scénarios d'application réels

Contrôler le masquage et l'affichage des éléments est très courant dans le développement Web réel. Voici quelques exemples : 🎜🎜Menu de navigation🎜🎜Lorsque l'utilisateur clique sur le menu de navigation ou le menu déroulant, nous pouvons. contrôlez l'élément de menu par Afficher et masquer pour développer et réduire le menu. 🎜🎜Boîtes modales🎜🎜Les boîtes modales sont souvent utilisées lorsque les utilisateurs interagissent avec des sites Web. Nous pouvons créer un élément div modal et contrôler l'affichage et le masquage du modal en ajoutant et en supprimant des noms de classe. 🎜🎜Carte de titre🎜🎜Parfois, nous devons afficher des cartes de contenu sur la page, chaque carte a un titre et un contenu. Si nous affichions toutes les cartes sur la page, celle-ci deviendrait très encombrée. Par conséquent, nous pouvons obtenir une mise en page concise en contrôlant l’affichage et le masquage des éléments de la carte. 🎜🎜De manière générale, contrôler le masquage et l'affichage des éléments est une opération très courante en développement web. En utilisant les attributs CSS et les noms de classe, nous pouvons facilement implémenter cette fonction et offrir aux utilisateurs une meilleure expérience interactive. 🎜

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!