Comment utiliser l'attribut display de CSS pour masquer et afficher des éléments div-Questions et réponses frontales-php.cn

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

PHPz

Libérer： 2023-04-21 13:55:22

original

2208 Les gens l'ont consulté

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;
}

Copier après la connexion

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;
}

Copier après la connexion

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

div {
  display: inline-block;
}

Copier après la connexion

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

div {
  display: inline;
}

Copier après la connexion

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;
}

Copier après la connexion

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

div {
  display: table-row;
}

Copier après la connexion

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

div {
  display: table-cell;
}

Copier après la connexion

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>

Copier après la connexion

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!