Comment masquer et afficher les divs en CSS

DIV Hide and Show CSS

DIV est un élément important dans les balises HTML. Il peut être utilisé pour afficher du texte, des images, des vidéos, etc. Dans la conception Web, nous rencontrons souvent des situations où nous devons masquer ou afficher certains éléments, ce qui nécessite l'utilisation de CSS pour définir le DIV. Cet article explique comment utiliser CSS pour masquer et afficher DIV.

1. Propriété d'affichage CSS

La propriété d'affichage CSS peut contrôler la façon dont les éléments sont affichés sur la page. display a plusieurs valeurs, les suivantes sont couramment utilisées :

1. none : l'élément n'est pas affiché et n'occupe pas l'espace de la page ;
2. block : l'élément générera un conteneur de niveau bloc, occupant toute la largeur, et est souvent utilisé pour afficher du texte ou des éléments au niveau du bloc tels que des images ;
3. inline : l'élément n'occupera pas de ligne, mais occupera uniquement sa propre largeur et sa propre hauteur. Il est souvent utilisé pour afficher des éléments en ligne tels que des liens et des images ; inline-block : similaire à inline, mais la largeur et la hauteur peuvent être définies. Height ;
4. flex : disposition flexible, qui peut allouer de manière flexible l'espace des éléments.
5. Nous pouvons masquer et afficher DIV en définissant la propriété display de CSS.

Ce qui suit est un exemple pour illustrer :

Dans le fichier HTML, nous créons un élément DIV :

Voici le contenu à masquer/afficher

Ensuite Dans le fichier CSS, définissez l'attribut d'affichage du DIV :

#myDiv{

  display:none;   /* 默认隐藏 */

}

Lors du chargement de la page, l'élément DIV sera masqué. À ce stade, nous devons ajouter un événement pour obtenir l'effet d'affichage lorsque la souris clique.

En JavaScript, vous pouvez modifier l'attribut d'affichage du CSS en définissant l'attribut de style de l'élément pour masquer et afficher l'élément. Voici les opérations spécifiques :

/

Récupérer l'élément

/ var myDiv = document.getElementById('myDiv');
/

Lorsque l'on clique sur la souris, afficher la fonction DIV

/ showDiv(){

   myDiv.style.display = 'block';

}

/

Lorsque vous cliquez sur la souris, masquez la fonction DIV

/ HiddenDiv(){

   myDiv.style.display = 'none';

}

De cette façon, lorsque vous cliquez sur la souris, la DIV sera présentée sur la page comme un élément de niveau bloc. Lorsque vous cliquerez à nouveau, il sera à nouveau masqué.

2. Attribut de visibilité CSS

Un autre attribut qui contrôle le masquage et l'affichage des éléments est la visibilité. la visibilité a deux valeurs : visible (visible) et cachée (cachée). Contrairement à l'affichage, lorsque la visibilité est définie sur masquée, l'élément est masqué mais occupe toujours de l'espace sur la page.

Dans le fichier HTML, nous créons également un élément DIV :

Voici le contenu à masquer/afficher

Puis dans le fichier CSS, définissez le DIV attribut de visibilité :

#myDiv{

  visibility:hidden;   /* 默认隐藏 */

}

Lors du chargement de la page, cet élément DIV sera masqué. À ce stade, nous devons ajouter un événement pour obtenir l'effet d'affichage lorsque la souris clique.

En JavaScript, on peut également changer l'attribut de visibilité d'un élément en changeant son attribut de style. Voici le code spécifique :

/

Récupère l'élément

/ var myDiv = document.getElementById('myDiv');
/

Lorsque la souris clique, affiche la fonction DIV

/ showDiv(){

   myDiv.style.visibility = 'visible';

}

/

Lorsque vous cliquez sur la souris, masquez la fonction DIV

/ HiddenDiv(){

   myDiv.style.visibility = 'hidden';

}

De cette façon, lorsque vous cliquez sur la souris, la DIV deviendra visible. Lorsque vous cliquez à nouveau, il sera à nouveau masqué.

3. Résumé

Dans la conception Web, afficher et masquer des éléments est une exigence très courante. Il existe deux manières principales de contrôler le masquage et l'affichage des éléments : l'une consiste à le contrôler en modifiant l'attribut d'affichage de l'élément, et l'autre consiste à le contrôler en modifiant l'attribut de visibilité de l'élément. En maîtrisant ces deux méthodes, nous pouvons contrôler de manière plus flexible l'affichage et le masquage de divers éléments, obtenant ainsi de meilleurs effets d'affichage des pages Web.

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!