Comment afficher et masquer les divs CSS

CSS est un langage utilisé pour le style des pages Web. Il peut être utilisé pour modifier l'apparence et la mise en page de la page. En CSS, l'élément div peut être utilisé pour regrouper le contenu Web et appliquer différents styles à ces composants. Parmi eux, l’affichage et le masquage des éléments div sont très utiles dans la conception de la page.

Dans cet article, nous verrons comment utiliser les éléments CSS div pour afficher et masquer les éléments de page. Cet article couvrira le contenu suivant :

1. Qu'est-ce que l'élément CSS div
2. Propriété d'affichage CSS
3. Propriété de visibilité CSS
4. Comment utiliser les éléments CSS div pour afficher et masquer les éléments de page

1. Élément div

En HTML, l'élément div est un élément de niveau bloc sans sémantique. Il peut être utilisé pour regrouper du contenu Web, et l'apparence et la disposition de ces composants peuvent être modifiées via des styles CSS.

Par exemple, disons que nous avons trois éléments de contenu différents sur la page Web. Le code HTML de ces éléments est le suivant :

<div class="header">头部内容</div>
<div class="content">正文内容</div>
<div class="footer">底部内容</div>

Dans le code ci-dessus, nous avons utilisé trois éléments div pour regrouper l'en-tête, le corps et le bas. contenu . Ensuite, nous pouvons modifier le style de chaque élément div via des styles CSS, tels que la définition de la couleur d'arrière-plan, de la police du texte, de la bordure, etc.

2. Attribut d'affichage CSS

En CSS, l'attribut d'affichage peut être utilisé pour contrôler le mode d'affichage d'un élément. Ses valeurs sont les suivantes :

• aucun : L'élément ne sera pas affiché et n'occupera pas l'espace de la page.
• block : L'élément sera affiché comme un élément de niveau bloc, occupant sa propre ligne.
• inline : l'élément sera affiché en tant qu'élément en ligne et affiché sur la même ligne que les autres éléments en ligne.
• inline-block : l'élément sera affiché comme un élément de bloc en ligne et affiché sur la même ligne que les autres éléments en ligne, mais des attributs tels que la largeur et la hauteur peuvent être définis.

Voici un exemple montrant comment utiliser la propriété CSS display pour masquer un élément de page.

<div class="box">要隐藏的元素</div>

.box {
  display: none;
}

Dans le code ci-dessus, nous utilisons un élément div avec une classe box et définissons son attribut d'affichage sur none. Cela signifie que cet élément div ne sera pas affiché sur la page.

3. Attribut de visibilité CSS

L'attribut de visibilité CSS peut également être utilisé pour contrôler l'affichage et le masquage d'un élément. Contrairement à l'attribut d'affichage, l'attribut de visibilité contrôle uniquement si l'élément est visible, mais n'affecte pas la disposition de l'élément sur la page. Les valeurs facultatives pour l'attribut de visibilité incluent :

• visible : l'élément est visible, ce qui est identique à la valeur par défaut de l'attribut d'affichage.
• hidden : L'élément est invisible mais occupe toujours l'espace de la page.
• collapse : utilisé pour les éléments de tableau. Lorsqu'il est configuré pour se réduire, l'élément sera invisible et la bordure de la cellule disparaîtra.

Voici un exemple montrant comment utiliser la propriété de visibilité CSS pour masquer un élément de page.

<div class="box">要隐藏的元素</div>

.box {
  visibility: hidden;
}

Dans le code ci-dessus, nous utilisons un élément div avec une classe box et définissons son attribut de visibilité sur caché. Cela signifie que l'élément div ne sera pas affiché sur la page, mais qu'il occupera toujours l'espace de la page.

4. Comment utiliser les éléments CSS div pour afficher et masquer les éléments de page

Nous avons introduit les propriétés d'affichage et de visibilité CSS ci-dessus, nous combinerons ces propriétés pour implémenter un bouton de clic sur la page pour afficher ou masquer un div. fonction.

Le code HTML est le suivant :

<button onclick="toggle()">点击我</button>
<div class="box">要显示或隐藏的元素</div>

Dans le code ci-dessus, nous avons créé un élément bouton et y avons ajouté un événement onclick. Nous créons également un élément div avec une classe box, qui est l'élément que nous voulons masquer ou afficher.

Ensuite, nous ajoutons le code suivant au fichier CSS :

.box {
  visibility: hidden;
}

Cela rendra l'élément box invisible au moment du chargement de la page.

Enfin, nous ajoutons le code suivant au code JavaScript de la page :

function toggle() {
  var box = document.querySelector('.box');
  if (box.style.display === 'none') {
    box.style.display = '';
  } else {
    box.style.display = 'none';
  }
}

Dans le code ci-dessus, nous définissons une fonction appelée toggle() et la lions à l'événement onclick du bouton. À l'intérieur de la fonction, nous utilisons la méthode document.querySelector() pour obtenir l'élément avec la classe box et vérifier si son attribut d'affichage n'est aucun. Si c'est le cas, nous définissons sa propriété display sur la chaîne vide, affichant ainsi l'élément box ; sinon, nous définissons sa propriété display sur none, masquant ainsi l'élément box.

Ce qui précède explique comment utiliser les éléments CSS div pour afficher et masquer les éléments de page. En maîtrisant ces techniques, nous pouvons rendre nos pages plus dynamiques et interactives.

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!