css cacher afficher div

CSS Hide and Show DIV

Dans le développement Web, masquer et afficher des éléments est une tâche fréquemment utilisée, en particulier lors de la création d'effets dynamiques. L'utilisation de CSS peut facilement masquer et afficher des éléments, mais elle peut également accélérer le chargement du site Web et améliorer l'expérience utilisateur.

1. attribut display

L'attribut display peut contrôler la façon dont un élément est affiché. Il a les valeurs suivantes :

• aucun : Indique que l'élément n'est pas affiché et occupe 0 espace.
• block : indique que l'élément sera affiché comme un élément de niveau bloc, occupant une ligne.
• inline : indique que les éléments seront affichés sous forme d'éléments en ligne, sans sauts de ligne et disposés en séquence.
• inline-block : indique que l'élément sera affiché comme un élément de niveau bloc en ligne sans retour à la ligne, mais que des attributs tels que la largeur, la hauteur, le remplissage, etc. peuvent être définis.
• table : Indique que l'élément sera affiché sous forme de tableau.
• table-cell : indique que l'élément sera affiché sous forme de cellule de tableau.
• flex : indique que l'élément adopte une disposition flexible.
• grid : indique que l'élément adopte une disposition en grille.

Par exemple, nous pouvons utiliser display:none pour masquer un élément :

<div style="display:none;">这是一个被隐藏的元素</div>

Utilisez display:block pour afficher l'élément en tant qu'élément de niveau bloc :

<div style="display:block;">这是一个显示为块级元素的元素</div>

2. attribut de visibilité

l'attribut de visibilité peut contrôler la visibilité de l'élément. Il a les valeurs suivantes :

• visible : indique que l'élément est visible.
• caché : indique que l'élément est invisible, mais qu'il prendra quand même de la place.

Par exemple, on peut utiliser visibilité:hidden pour masquer un élément :

<div style="visibility:hidden;">这是一个被隐藏的元素</div>

Utiliser visibilité:visible pour afficher l'élément.

3. attribut opacité

l'attribut opacité peut contrôler la transparence d'un élément. Sa plage de valeurs va de 0 à 1, 0 signifie complètement transparent et 1 signifie opaque.

Par exemple, nous pouvons définir un élément pour qu'il soit translucide :

<div style="opacity:0.5;">这是一个半透明的元素</div>

4. Animation CSS3

En plus des trois méthodes ci-dessus, nous pouvons également utiliser l'animation CSS3 pour masquer et afficher des éléments. L'animation CSS3 peut produire des effets plus riches et améliorer l'interactivité du site Web.

Par exemple, nous pouvons utiliser @keyframes pour définir une animation masquée à afficher :

@keyframes showDiv {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

<div class="show" style="opacity:0;">这是一个被隐藏的元素</div>

<style>
.show {
    animation: showDiv 1s forwards;
}
</style>

Dans le code ci-dessus, nous définissons d'abord une règle @keyframes, qui définit l'effet d'animation de la transparence 0 à la transparence 1. Définissez ensuite class="show" et la transparence initiale sur 0 dans l'élément. Enfin, l'attribut animation est ajouté à la classe .show dans la feuille de style, spécifiant le nom, la durée et l'état de la feuille de style une fois l'animation terminée.

En contrôlant l'ajout et la suppression de cette classe, nous pouvons changer l'état d'affichage de l'élément :

var div = document.getElementsByClassName("show")[0];
div.classList.add("show");

var div = document.getElementsByClassName("show")[0];
div.classList.remove("show");

Résumé

Le contenu ci-dessus présente plusieurs méthodes d'utilisation de CSS pour masquer et afficher des éléments, notamment l'attribut d'affichage et l'attribut de visibilité. , et l'attribut d'opacité et les animations CSS3. La maîtrise de ces méthodes peut nous aider à obtenir des effets de page Web plus élégants et sophistiqués.

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!