css afficher et masquer

CSS Show and Hide

CSS (Cascading Style Sheets) est un langage de feuille de style utilisé pour décrire le style et la mise en page des pages Web. Dans le développement Web, les fonctions CSS d'affichage et de masquage sont très importantes, et peuvent être obtenues en contrôlant la visibilité des éléments HTML. Cet article présentera la méthode d'implémentation et l'application de l'affichage et du masquage CSS.

1. Syntaxe de base

En CSS, la visibilité d'un élément est contrôlée en définissant son attribut d'affichage. Les valeurs de l'attribut display sont les suivantes :

1. none : masque l'élément et ne réserve pas d'espace.
2. bloc : l'élément est affiché comme un élément de niveau bloc et occupe toute la ligne d'espace.
3. inline : l'élément est affiché comme un élément en ligne et occupe de l'espace en ligne.
4. inline-block : l'élément est affiché comme un élément de niveau bloc en ligne, occupant un espace en ligne, mais la largeur et la hauteur peuvent être définies.
5. table : L'élément est affiché sous forme de tableau. À ce stade, l'attribut d'affichage de l'élément sera défini sur table-cell, et table-cell occupera l'espace du tableau.
6. table-row : l'élément est affiché sous forme de ligne de tableau. À ce stade, l'attribut d'affichage de l'élément sera défini sur table-cell et table-cell occupe l'espace du tableau.
7. table-cell : L'élément est affiché sous forme de cellule de tableau et occupe l'espace du tableau.

2. Méthode d'implémentation

1. Masquage initial

La méthode d'implémentation la plus simple consiste à définir l'attribut d'affichage de l'élément sur none en CSS. Par exemple, dans le code suivant, l'état initial de l'élément div est masqué :

div{
  display:none;
}

2. Cliquez pour afficher

Avec JavaScript, vous pouvez afficher ou masquer un élément lorsque vous cliquez sur un bouton. Tout d'abord, définissez un bouton en HTML :

<button onclick="toggle()">点击显示/隐藏</button>

Un événement onclick est défini ici Lorsque le bouton est cliqué, la fonction toggle() sera exécutée. Deuxièmement, en CSS, définissez l'attribut display de l'élément sur none, comme indiqué ci-dessous :

#box{
  display:none;
}

Enfin, en JavaScript, définissez la fonction toggle() pour afficher ou masquer en modifiant l'attribut display de l'élément :

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

3. Mouse Slide over display

De même, JavaScript peut être utilisé pour afficher ou masquer un élément lorsque la souris survole. En HTML, définissez un élément :

<div onmouseover="show()" onmouseout="hide()">鼠标滑过显示/隐藏</div>

Les événements onmouseover et onmouseout sont définis ici, qui représentent respectivement les opérations de glissement et de sortie de la souris. Deuxièmement, en CSS, définissez l'attribut display de l'élément sur none, comme indiqué ci-dessous :

#box{
  display:none;
}

Enfin, en JavaScript, définissez les fonctions show() et hide() :

function show(){
  var box = document.getElementById("box");
  box.style.display= "block";
}

function hide(){
  var box = document.getElementById("box");
  box.style.display= "none";
}

3. Exemples d'application

1. Pop- up box

Vous pouvez afficher et masquer la boîte contextuelle via l'attribut display de CSS. En HTML, définissez un bouton et une fenêtre pop-up :

<button onclick="show()">点击弹窗</button>

<div id="dialog">
  <h2>弹窗标题</h2>
  <p>弹窗内容</p>
  <button onclick="hide()">关闭弹窗</button>
</div>

Ensuite, en CSS, définissez l'attribut d'affichage de la fenêtre pop-up sur none, comme indiqué ci-dessous :

#dialog{
  display:none;
  position:absolute;
  top:50%;
  left:50%;
  width:400px;
  height:300px;
  margin-left:-200px;
  margin-top:-150px;
  background:#fff;
  border:1px solid #ccc;
  padding:20px;
}

Ici la largeur, la hauteur, la position et l'arrière-plan de la fenêtre contextuelle est défini sur la couleur et d'autres styles. Enfin, en JavaScript, définissez les fonctions show() et hide() pour contrôler respectivement l'affichage et le masquage de la fenêtre pop-up :

function show(){
  var dialog = document.getElementById("dialog");
  dialog.style.display= "block";
}

function hide(){
  var dialog = document.getElementById("dialog");
  dialog.style.display= "none";
}

2. Carrousel d'images

Grâce à l'attribut display du CSS, l'effet de commutation du un carrousel d'images peut être réalisé. En HTML, définissez un conteneur d'images et plusieurs images :

<div id="slider">
  <img src="img/1.jpg" />
  <img src="img/2.jpg" />
  <img src="img/3.jpg" />
  <img src="img/4.jpg" />
</div>

Ensuite, en CSS, définissez le style du conteneur d'images, comme indiqué ci-dessous :

#slider{
  width:500px;
  height:300px;
  overflow:hidden;
  position:relative;
}

#slider img{
  position:absolute;
  top:0;
  left:0;
  display:none;
  width:100%;
  height:100%;
}

Ici, vous définissez la largeur, la hauteur, le masquage du débordement et l'image du conteneur d'images. Propriétés d'emplacement et d'affichage. Enfin, en JavaScript, l'effet de carrousel d'images est obtenu :

var imgs = document.querySelectorAll("#slider img");
var index = 0;

setInterval(function(){
  imgs[index].style.display = "none";
  index = (index + 1) % imgs.length;
  imgs[index].style.display = "block";
}, 2000);

La fonction setInterval est utilisée ici pour changer d'image toutes les 2 secondes. La méthode de mise en œuvre spécifique consiste à définir d'abord l'attribut d'affichage de l'image actuelle sur aucun, puis à calculer la valeur d'index de l'image suivante et enfin à définir l'attribut d'affichage de l'image sur bloc.

4. Résumé

La méthode d'implémentation des fonctions d'affichage et de masquage CSS est très simple, mais c'est une compétence de base en développement Web. Dans le développement réel, divers effets peuvent être obtenus grâce à l'attribut d'affichage du CSS, tels que des fenêtres contextuelles, des carrousels d'images, etc. Dans le même temps, grâce à la coopération de JavaScript, des effets interactifs plus riches peuvent être obtenus.

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!