DIV en CSS Afficher Masquer DIV

DIV est l'un des éléments les plus couramment utilisés en HTML, il peut être utilisé pour créer diverses mises en page et conteneurs dans des pages Web. En CSS, utiliser des DIV pour afficher ou masquer d’autres DIV est également une technique efficace. Cet article explique comment utiliser CSS pour afficher et masquer DIV.

Afficher l'élément DIV

Pour afficher un élément DIV, vous pouvez utiliser l'attribut CSS display pour contrôler son mode d'affichage. L'attribut display a quatre types de valeurs couramment utilisés :

1. block : affiche l'élément en tant qu'élément de niveau bloc.
2. inline-block : affiche l'élément en tant qu'élément de bloc en ligne (similaire à un élément en ligne, mais avec les caractéristiques d'un élément de niveau bloc).
3. inline : affiche l'élément en tant qu'élément en ligne (tel que du texte).
4. aucun : masque l'élément et n'occupe aucun espace sur la page.

Par exemple, le style CSS suivant affiche un élément DIV avec l'ID "demo" en tant qu'élément de niveau bloc :

demo {

display: block;

}

Bien sûr, vous pouvez également l'afficher en tant qu'élément de bloc en ligne ou un élément en ligne, changez simplement le type de valeur de l'attribut d'affichage en "inline-block" ou "inline".

Masquer les éléments DIV

Pour masquer un élément DIV, la méthode la plus courante consiste à définir le type de valeur de l'attribut d'affichage de style sur "aucun", comme indiqué ci-dessous :

demo {

display: none;

}

Cette méthode peut make the target L'élément DIV disparaît complètement, et même si vous utilisez JavaScript ou d'autres méthodes pour obtenir sa valeur, vous ne pouvez obtenir aucun contenu. Si vous définissez l'affichage d'un élément DOM sur "aucun", il ne sera pas affiché sur la page - même si vous définissez la hauteur et la largeur, il n'apparaîtra pas.

Bien sûr, vous pouvez également utiliser d'autres méthodes pour masquer les éléments DIV, comme l'utilisation de l'attribut de visibilité. Les types de valeur de l'attribut de visibilité incluent :

1. visible : l'élément est visible.
2. masqué : L'élément n'est pas visible, mais prend position sur la page.
3. collapse : utilisé pour les tableaux, les éléments seront réduits.

Par exemple, le style CSS suivant définit un élément DIV avec l'ID "demo" pour qu'il soit invisible :

demo {

visibility: hidden;

}

À ce moment, l'élément DIV ne sera pas visible, mais il le sera quand même occupent l'espace sur la position de la page, il restera également visible lorsque vous accéderez à ses propriétés en utilisant JavaScript ou d'autres moyens.

Utilisez JavaScript pour contrôler l'affichage et le masquage des éléments DIV

Dans certains cas, vous devrez peut-être utiliser JavaScript pour contrôler l'affichage et le masquage des éléments DIV. A ce stade, nous pouvons utiliser l'attribut style fourni par l'API DOM pour modifier le style CSS de l'élément. Par exemple, le code JavaScript suivant affiche un élément DIV avec l'ID "demo" :

document.getElementById("demo").style.display = "block";

De même, nous pouvons également le masquer :

document .getElementById("demo").style.display = "none";

Il convient de noter que l'attribut style ne peut accéder qu'aux styles en ligne, mais ne peut pas accéder aux feuilles de style externes et aux feuilles de style intégrées. Si vous utilisez une feuille de style externe pour contrôler le style des éléments, vous devez utiliser d'autres méthodes pour modifier la feuille de style, telles que la manipulation de l'élément de lien via l'API DOM.

Résumé

Utiliser des éléments DIV en CSS pour afficher ou masquer d'autres éléments est une technologie très pratique. Elle peut être utilisée pour créer des effets de page Web dynamiques, masquer des publicités et du contenu, utiliser JavaScript pour contrôler l'état des éléments, etc. Il convient de noter que les types de valeur de l'attribut d'affichage et de l'attribut de visibilité sont très différents et doivent être sélectionnés en fonction de l'effet de mise en œuvre spécifique.

Lorsque vous utilisez JavaScript pour contrôler le style des éléments, vous devez faire attention aux problèmes de compatibilité des navigateurs afin de mieux prendre en charge diverses plates-formes et appareils. Dans le même temps, il est recommandé d'utiliser CSS pour contrôler le style des éléments autant que possible afin d'améliorer la maintenabilité et les performances du code.

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!