Maison > Article > interface Web > 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 :
2. Méthode d'implémentation
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; }
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"; } }
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
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"; }
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!