Comment afficher et masquer des éléments en CSS

CSS est un langage utilisé pour la conception Web. Il peut améliorer la lisibilité et l'interactivité des pages Web, et enrichit également la présentation des éléments Web. Parmi elles, les fonctions d'affichage et de masquage de CSS sont des exigences courantes dans le processus de conception Web. Cet article présentera en détail comment afficher et masquer des éléments en CSS.

1. Utilisez l'attribut display

L'attribut display de CSS peut contrôler le mode d'affichage des éléments. Les valeurs d'attribut courantes incluent block, none, inline, inline-block, etc. Parmi eux, la valeur de l'attribut none peut masquer l'élément. Sous cette valeur d'attribut, l'élément ne sera pas affiché sur la page Web.

Par exemple, le code suivant peut afficher et masquer des paragraphes en cliquant sur un bouton :

Code HTML :

<button onclick="hide()">隐藏段落</button>
<p id="hide-me">这是一段话。</p>

Code CSS :

#hide-me {
  display: block;
}

Code JavaScript :

function hide() {
    var para = document.getElementById("hide-me");
    para.style.display = "none";
}

Dans le code ci-dessus, lorsque l'on clique sur le bouton, le Le code JavaScript obtiendra l'élément Paragraph avec l'ID "hide-me", puis modifiera son attribut d'affichage pour obtenir l'effet de masquer l'élément.

2. Utilisez l'attribut de visibilité

L'attribut de visibilité de CSS peut contrôler la visibilité des éléments sur la page​​sont visibles, masquées et réduites. Parmi eux, la valeur d'attribut cachée peut masquer l'élément. Sous cette valeur d'attribut, l'élément occupera toujours de l'espace sur la page Web.

Par exemple, le code suivant peut afficher et masquer des paragraphes en cliquant sur un bouton :

Code HTML :

<button onclick="hide()">隐藏段落</button>
<p id="hide-me">这是一段话。</p>

Code CSS :

#hide-me {
  visibility: visible;
}

Code JavaScript :

function hide() {
    var para = document.getElementById("hide-me");
    para.style.visibility = "hidden";
}

Dans le code ci-dessus, lorsque l'on clique sur le bouton, le Le code JavaScript obtiendra l'élément Paragraph avec l'ID "hide-me", puis modifiera son attribut de visibilité pour obtenir l'effet de masquer l'élément.

3. Utilisez l'attribut opacity

L'attribut opacity de CSS peut contrôler la transparence de l'élément. La valeur de l'attribut commun est un nombre de 0 à 1, indiquant l'opacité de l'élément. Parmi eux, 0 signifie complètement transparent et 1 signifie opaque. En définissant l'attribut d'opacité de l'élément sur 0, nous pouvons également masquer l'élément.

Par exemple, le code suivant peut afficher et masquer des paragraphes en cliquant sur un bouton :

Code HTML :

<button onclick="hide()">隐藏段落</button>
<p id="hide-me">这是一段话。</p>

Code CSS :

#hide-me {
  opacity: 1;
}

Code JavaScript :

function hide() {
    var para = document.getElementById("hide-me");
    para.style.opacity = "0";
}

Dans le code ci-dessus, lorsque l'on clique sur le bouton, le Le code JavaScript obtiendra l'élément Paragraph avec l'ID "hide-me", puis modifiera son attribut d'opacité pour obtenir l'effet de masquer l'élément.

4. Utilisez l'attribut z-index

Dans certains cas, nous devons utiliser l'ordre d'empilement pour contrôler le masquage et l'affichage des éléments. L'attribut z-index de CSS peut contrôler l'ordre d'empilement des éléments sur la page en définissant le niveau de l'élément, puis en ajustant la valeur de l'attribut z-index des différents éléments, les effets de masquage et d'affichage peuvent être obtenus.

Par exemple, le code suivant peut afficher et masquer des paragraphes en cliquant sur un bouton :

Code HTML :

<button onclick="hide()">隐藏段落</button>
<p id="hide-me" style="position: absolute; top: 50px; left: 50px; z-index: 1;">这是一段话。</p>

Code CSS :

Code JavaScript :

function hide() {
    var para = document.getElementById("hide-me");
    para.style.zIndex = "-1";
}

Dans le code ci-dessus, lorsque l'on clique sur le bouton, le JavaScript le code obtiendra l'ID. Il s'agit de l'élément de paragraphe "hide-me", puis modifiera son attribut z-index pour obtenir l'effet de masquer l'élément.

Résumé

Les fonctions d'affichage et de masquage en CSS sont très couramment utilisées. Elles peuvent nous aider à contrôler l'affichage et le masquage de divers éléments dans les pages Web. En utilisant les propriétés d'affichage, de visibilité, d'opacité et d'index z, nous pouvons facilement obtenir l'effet souhaité et rendre la conception Web plus flexible et diversifiée.

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!