css afficher masquer div

CSS joue un rôle important dans la conception Web. Il peut non seulement embellir les pages Web, mais également obtenir certains effets d'interaction avec l'utilisateur. Cet article explique comment utiliser CSS pour afficher et masquer les div.

1. Utilisez l'attribut display pour afficher et masquer les div

L'attribut display est utilisé pour spécifier le mode d'affichage des éléments​​sont aucun et bloquent. . Parmi eux, none signifie masquer l'élément, et block signifie afficher l'élément en tant qu'élément de bloc. Par conséquent, nous pouvons afficher et masquer les divs en contrôlant l’attribut display.

1.1 Masquer le div

Pour masquer un div, définissez simplement son attribut d'affichage sur aucun. Voici un exemple :

<div id="myDiv" style="display:none;">这是要隐藏的div</div>

Dans le code ci-dessus, nous avons ajouté un attribut id à la balise div pour la styliser en CSS. Dans le même temps, nous définissons la propriété display du div sur none afin qu'elle soit masquée.

1.2 Afficher le div

Pour afficher un div caché, définissez simplement son attribut d'affichage sur bloquer ou sur une autre valeur visible. Voici un exemple :

<button onclick="showDiv()">点击显示div</button>
<div id="myDiv" style="display:none;">这是要显示的div</div>
<script>
function showDiv() {
  document.getElementById("myDiv").style.display = "block";
}
</script>

Dans le code ci-dessus, nous avons ajouté un bouton et lui avons lié un événement onclick Lorsque l'utilisateur clique sur le bouton, la fonction showDiv() sera appelée. L'attribut du div est défini sur block pour qu'il soit affiché.

2. Utilisez l'attribut de visibilité pour afficher et masquer les divs

L'attribut de visibilité est utilisé pour spécifier la visibilité des éléments​​sont visibles et masqués. Parmi eux, caché signifie cacher l'élément et visible signifie rendre l'élément visible. Par conséquent, nous pouvons également afficher et masquer les divs en contrôlant l'attribut de visibilité.

2.1 Div caché

Pour masquer un div, définissez simplement son attribut de visibilité sur caché. Voici un exemple :

<div id="myDiv" style="visibility:hidden;">这是要隐藏的div</div>

Dans le code ci-dessus, nous avons ajouté un attribut id à la balise div pour la styliser en CSS. En même temps, nous définissons la propriété de visibilité du div sur masqué afin qu'il soit masqué.

2.2 Afficher le div

Pour afficher un div caché, définissez simplement sa propriété de visibilité sur visible. Voici un exemple :

<button onclick="showDiv()">点击显示div</button>
<div id="myDiv" style="visibility:hidden;">这是要显示的div</div>
<script>
function showDiv() {
  document.getElementById("myDiv").style.visibility = "visible";
}
</script>

Dans le code ci-dessus, nous avons ajouté un bouton et lui avons lié un événement onclick Lorsque l'utilisateur clique sur le bouton, la fonction showDiv() sera appelée. La propriété du div est définie sur visible afin qu'elle s'affiche.

3. Conclusion

Grâce à l'exemple ci-dessus, nous pouvons voir que l'affichage et la visibilité de div peuvent être réalisés en utilisant les attributs d'affichage et de visibilité. La différence est que l'attribut display supprimera complètement l'élément de la page, tandis que l'attribut visibilité masquera simplement l'élément. Par conséquent, si nous devons conserver la position d'un élément entre le masquage et l'affichage, nous devons choisir d'utiliser l'attribut de visibilité.

Bien sûr, pour une meilleure expérience utilisateur, nous pouvons également utiliser l'animation CSS pour ajouter des dégradés ou d'autres effets pour afficher et masquer les divs. Cela doit être réalisé en combinant les attributs de transition ou d'animation de CSS. Les lecteurs intéressés peuvent trouver des didacticiels pertinents en ligne.

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!