Maison > Article > développement back-end > Afficher et masquer le div HTML
Afficher et masquer le div HTML
- WBOYoriginal
- 2023-05-09 09:30:364112parcourir
HTML div est un élément de mise en page Web courant, qui peut être utilisé pour diviser des pages et regrouper le contenu. Parfois, nous souhaitons contrôler dynamiquement l'affichage et le masquage des divs en fonction de l'interaction de l'utilisateur ou d'autres conditions. À ce stade, nous devons comprendre comment utiliser JavaScript et CSS pour afficher et masquer les divs.
- Utilisez CSS pour afficher et masquer les divs
Le moyen le plus simple d'utiliser CSS pour afficher et masquer les divs est d'appliquer l'attribut display. L'attribut display fait référence au mode d'affichage de l'élément. Il a plusieurs valeurs, telles que block, inline, inline-block, none, etc. Parmi elles, la valeur none fera disparaître complètement l’élément, tandis que d’autres valeurs feront apparaître l’élément.
Dans le code ci-dessous, nous définissons un élément div avec l'identifiant myDiv et définissons son attribut d'affichage sur none. Cela signifie qu'au départ, l'élément div est invisible. Ensuite, nous définissons l'attribut display de myDiv pour qu'il bloque via JavaScript pour l'afficher.
<!DOCTYPE html>
<html>
<head>
<style>
#myDiv {
display: none;
}
</style>
</head>
<body>
<div id="myDiv">这是一个隐藏的div元素</div>
<button onclick="showDiv()">显示div</button>
<script>
function showDiv() {
document.getElementById("myDiv").style.display = "block";
}
</script>
</body>
</html>Dans cet exemple, nous obtenons l'élément div avec l'identifiant myDiv via la méthode getElementById de JavaScript et définissons son attribut d'affichage sur block pour l'afficher. Lorsque l'utilisateur clique sur le bouton "Afficher le div", la fonction showDiv sera appelée pour afficher et masquer le div.
- Utilisez JavaScript pour afficher et masquer les divs
En plus d'utiliser l'attribut display de CSS pour contrôler l'affichage et le masquage des divs, nous pouvons également l'implémenter via JavaScript. Dans ce cas, nous devons utiliser la propriété style.display de JavaScript pour contrôler l'état d'affichage du div.
Dans l'exemple ci-dessous, nous définissons un élément div avec l'identifiant div1 et définissons son état initial sur invisible. Ensuite, nous obtenons l'élément via la méthode getElementById de JavaScript et définissons sa propriété style.display sur block pour l'afficher. Lorsque l'utilisateur clique à nouveau sur le bouton, nous définissons la propriété style.display de div1 sur none pour la masquer.
<!DOCTYPE html>
<html>
<head>
<script>
function showHide() {
var div = document.getElementById("div1");
if (div.style.display === "none") {
div.style.display = "block";
} else {
div.style.display = "none";
}
}
</script>
</head>
<body>
<button onclick="showHide()">显示/隐藏div</button>
<div id="div1" style="display: none">这是一个隐藏的div元素</div>
</body>
</html>Dans cet exemple, nous affichons et masquons les divs en définissant une fonction showHide. Lorsque l'utilisateur clique sur le bouton "Afficher/Masquer div", la fonction showHide sera appelée. Dans la fonction, nous obtenons d'abord l'élément div avec l'identifiant div1 via la méthode getElementById, puis déterminons la valeur de son attribut style.display. S'il n'y en a pas, configurez-le pour le bloquer et affichez-le. Sinon, nous le définissons sur none, le masquant ainsi.
Résumé
HTML div est un élément de mise en page Web courant. Vous pouvez facilement afficher et masquer les div à l'aide de JavaScript et CSS. En appliquant l'attribut display et l'attribut style.display, nous pouvons contrôler l'état d'affichage de l'élément div pour afficher ou masquer dynamiquement le contenu selon les besoins. Cette fonction joue un grand rôle dans la conception de pages Web dynamiques, d'applications interactives, etc., et une compréhension approfondie de sa mise en œuvre est très importante pour les ingénieurs en développement Web.
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!