Maison > Article > interface Web > Comment utiliser l'attribut display de CSS pour masquer et afficher des éléments div

Comment utiliser l'attribut display de CSS pour masquer et afficher des éléments div

PHPzoriginal: 2023-04-21 11:20:452141parcourir

Masquer ou afficher des éléments spécifiques sur la page utilisent souvent l'attribut d'affichage CSS. Dans cet article, nous nous concentrerons sur la façon d'utiliser l'attribut display de CSS pour masquer et afficher les éléments div.

1. L'attribut display du CSS

L'attribut display du CSS a de nombreuses valeurs, parmi lesquelles les valeurs couramment utilisées sont les suivantes :

aucun : Masquer l'élément et libérer l'espace occupé par l'élément.
block : affiche l'élément en tant qu'élément de niveau bloc.
inline-block : affiche l'élément en tant qu'élément de niveau bloc en ligne.
inline : affiche l'élément en tant qu'élément en ligne.
table : affiche l'élément en tant qu'élément de tableau.
table-row : affiche l'élément en tant qu'élément de ligne de tableau.
table-cell : affiche l'élément en tant qu'élément de cellule de tableau.

2. Utilisez l'attribut display pour masquer et afficher l'élément div

Masquer l'élément div

Utilisez l'attribut display pour masquer l'élément div et libérer l'espace occupé par l'élément :

div {
  display: none;
}

Afficher l'élément div. div element

Utiliser l'attribut display affiche un élément div en tant qu'élément de niveau bloc :

div {
  display: block;
}

Utilisez l'attribut display pour afficher un élément div en tant qu'élément de niveau bloc en ligne :

div {
  display: inline-block;
}

Utilisez l'attribut display pour afficher un div élément en tant qu'élément en ligne :

div {
  display: inline;
}

Utilisez l'attribut display pour afficher un élément div en tant qu'élément en ligne. Affichez l'élément en tant qu'élément de tableau :

div {
  display: table;
}

Utilisez l'attribut display pour afficher l'élément div en tant qu'élément de ligne de tableau :

div {
  display: table-row;
}

Utilisez l'attribut display pour afficher l'élément div en tant qu'élément de cellule de tableau :

div {
  display: table-cell;
}

3. Utilisez JavaScript pour contrôler le masquage et le masquage des éléments div Display

Si vous souhaitez contrôler le masquage et l'affichage des éléments div lorsque l'utilisateur clique sur un bouton, vous pouvez utiliser JavaScript pour y parvenir.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>显示/隐藏div元素</title>
  <style>
    #myDiv {
      width: 200px;
      height: 200px;
      background-color: #ccc;
      display: block;
    }
  </style>
</head>
<body>
  <button onclick="toggleDiv()">显示/隐藏div元素</button>
  <div id="myDiv"></div>
  <script>
    function toggleDiv() {
      var div = document.getElementById("myDiv");
      if (div.style.display === "none") {
        div.style.display = "block";
      } else {
        div.style.display = "none";
      }
    }
  </script>
</body>
</html>

Dans l'exemple, lorsque l'utilisateur clique sur le bouton, l'élément div avec l'identifiant myDiv est obtenu via JavaScript et détermine si l'attribut de style d'affichage de l'élément est aucun. Si tel est le cas, définissez-le sur bloquer, sinon définissez-le. n'en est aucun. Cela implémente le masquage et l'affichage des éléments div.

Résumé

Grâce à l'introduction de cet article, nous pouvons constater que l'attribut display du CSS est un attribut très important utilisé pour contrôler l'affichage et l'état masqué des éléments sur la page. Que vous contrôliez directement l'état d'un élément via CSS ou que vous implémentiez des fonctions interactives via JavaScript, il est indispensable de maîtriser l'utilisation de l'attribut display.

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment concevoir et créer des pages Web modernes avec CSS3Article suivant：Comment concevoir et créer des pages Web modernes avec CSS3

Articles Liés

Voir plus