div css afficher masquer div-Questions et réponses frontales-php.cn

div css afficher masquer div

王林

Libérer： 2023-05-27 11:03:07

original

1050 Les gens l'ont consulté

Conseils CSS : affichez et masquez le DIV via l'attribut d'affichage

En tant que l'un des éléments couramment utilisés dans les pages, le DIV est largement utilisé dans la mise en page, le formatage et la segmentation du contenu. Dans le développement réel, nous avons parfois besoin de contrôler l'affichage et le masquage d'un élément DIV via du code. Dans ce cas, l'attribut display de CSS peut être utilisé.

Le rôle de l'attribut display

L'attribut display est un attribut de base en CSS utilisé pour contrôler si un élément est affiché. Il peut être défini sur diverses valeurs pour obtenir différents effets d'affichage et de masquage. Plus précisément, les valeurs de l'attribut display sont les suivantes :

none : Masquer l'élément équivaut à supprimer complètement l'espace de l'élément sur la page. L'élément n'occupe aucun espace et n'est pas rendu.
block : affichez l'élément en tant qu'élément de niveau bloc, c'est-à-dire que l'élément occupera une ligne exclusive et s'enroulera automatiquement avant et après l'étiquette. Vous pouvez définir des styles tels que la largeur, la hauteur, les marges et le remplissage.
inline : affiche l'élément en tant qu'élément en ligne, c'est-à-dire que l'élément n'occupera pas de ligne exclusive et sera automatiquement renvoyé à la fin. Les styles tels que la largeur, la hauteur, les marges et le remplissage ne peuvent pas être définis.
inline-block : affichez les éléments en tant qu'éléments de bloc en ligne, qui ont les caractéristiques des éléments de niveau bloc. Vous pouvez également définir plusieurs éléments en ligne pour qu'ils soient affichés sur la même ligne.
table, table-row, table-cell, etc. : affiche les éléments sous forme de tableau et de ses éléments de cellule.

Réaliser l'affichage et le masquage de DIV

Ensuite, nous utiliserons plusieurs exemples pour démontrer comment utiliser l'attribut display pour afficher et masquer DIV.

Cliquez sur le bouton pour afficher et masquer DIV

Dans cet exemple, nous contrôlons l'affichage et le masquage de DIV via un bouton.

Partie HTML :

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>CSS显示和隐藏DIV</title>
    <link href="css/style.css" rel="stylesheet" type="text/css" />
  </head>
<body>
    <button onclick="toggle()">点击显示/隐藏DIV</button>
    <div id="myDiv" style="display:none;">这是一个DIV元素</div>
    <script src="js/main.js"></script>
</body>
</html>

Copier après la connexion

Partie CSS :

#myDiv {
    width: 200px;
    height: 200px;
    background-color: #ccc;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Copier après la connexion

Partie JavaScript :

function toggle() {
    var div = document.getElementById("myDiv");
    if (div.style.display === "none") {
        div.style.display = "block";
    } else {
        div.style.display = "none";
    }
}

Copier après la connexion

Dans cet exemple, nous avons ajouté un événement onclick à l'élément bouton du HTML et défini une fonction bascule. Cette fonction obtiendra l'élément DIV que nous devons contrôler via la méthode getElementById, puis réalisera les effets d'affichage et de masquage en jugeant la valeur de l'attribut d'affichage de l'élément.

Lorsque nous cliquons sur le bouton, la fonction bascule déterminera si la valeur de l'attribut d'affichage de l'élément DIV actuel est nulle. Si tel est le cas, il sera défini sur bloquer, c'est-à-dire qu'il sera affiché, sinon, il le sera. défini sur none, c'est-à-dire qu'il sera masqué.

Utilisez le sélecteur :hover pour afficher et masquer les DIV

Dans cet exemple, nous contrôlons l'affichage et le masquage des DIV en passant la souris sur l'élément.

Partie HTML :

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>CSS显示和隐藏DIV</title>
    <link href="css/style.css" rel="stylesheet" type="text/css" />
  </head>
<body>
    <div id="myDiv">
        <p>鼠标悬停在这里，显示下面的DIV元素</p>
        <div id="myPopup">这是一个DIV元素</div>
    </div>
</body>
</html>

Copier après la connexion

Partie CSS :

#myDiv {
    width: 200px;
    height: 80px;
    background-color: #eee;
    position: relative;
}
#myPopup {
    width: 100px;
    height: 100px;
    background-color: #ddd;
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
}
#myDiv:hover #myPopup {
    display: block;
}

Copier après la connexion

Dans cet exemple, nous utilisons : le sélecteur de survol pour afficher et masquer les éléments DIV. Lorsque la souris survole l'élément myDiv, l'élément myPopup sera affiché ; lorsque la souris quittera l'élément myDiv, l'élément myPopup sera masqué. Pour le moment, il nous suffit de définir la valeur de l'attribut d'affichage de l'élément myPopup sur none ou block.

Utilisez l'animation de transition CSS3 pour afficher et masquer DIV

Dans cet exemple, afin de rendre l'affichage et le masquage des éléments DIV plus fluides et plus naturels, nous utilisons l'effet d'animation de transition CSS3 pour y parvenir.

Partie HTML :

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>CSS显示和隐藏DIV</title>
    <link href="css/style.css" rel="stylesheet" type="text/css" />
  </head>
<body>
    <button onclick="toggle()">点击显示/隐藏DIV</button>
    <div id="myDiv">这是一个DIV元素</div>
    <script src="js/main.js"></script>
</body>
</html>

Copier après la connexion

Partie CSS :

#myDiv {
    width: 200px;
    height: 200px;
    background-color: #ccc;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: all .3s ease-in-out;
}

Copier après la connexion

Partie JavaScript :

function toggle() {
    var div = document.getElementById("myDiv");
    if (div.style.opacity === "0") {
        div.style.display = "block";
        div.style.opacity = "1";
    } else {
        div.style.opacity = "0";
        setTimeout(function() {div.style.display = "none";}, 300);
    }
}

Copier après la connexion

Dans cet exemple, nous définissons un effet de transition easy-in-out all .3s pour l'élément myDiv en CSS, de sorte que lorsque nous La valeur de l'attribut d'affichage ou la valeur de l'attribut d'opacité de l'élément myDiv est modifiée, une transition en douceur sera effectuée en fonction de cet effet.

En JavaScript, nous utilisons la fonction setTimeout pour retarder l'exécution d'un bloc de code afin d'attendre la fin de l'effet de transition. Lorsque nous cliquons sur le bouton, la fonction bascule déterminera si la valeur de l'attribut d'opacité de l'élément DIV actuel est 0. Si tel est le cas, elle sera définie sur 1 et la valeur de l'attribut d'affichage sera définie sur bloquer, c'est-à-dire affichée ; sinon, il sera affiché sur 0, puis attendez la fin de la transition et enfin définissez la valeur de son attribut d'affichage sur aucun, c'est-à-dire masquez-le.

Résumé

À travers les trois exemples ci-dessus, nous pouvons voir que l'attribut display de CSS peut facilement réaliser l'effet d'affichage et de masquage des éléments DIV, et pendant le processus de mise en œuvre, nous pouvons utiliser l'aide de JavaScript et CSS3 pour rendre le effet plus riche et naturel. J'espère que cet article pourra aider tout le monde à maîtriser l'attribut d'affichage du CSS !

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!