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 :
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.
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>Partie CSS :
#myDiv {
width: 200px;
height: 200px;
background-color: #ccc;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}Partie JavaScript :
function toggle() {
var div = document.getElementById("myDiv");
if (div.style.display === "none") {
div.style.display = "block";
} else {
div.style.display = "none";
}
}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é.
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>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;
}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.
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>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;
}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);
}
}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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
