Comment afficher et masquer les éléments div à l'aide de CSS

Dans la conception et le développement de sites Web, contrôler l'affichage et le masquage des éléments est une tâche très importante. CSS fournit un ensemble de propriétés et de méthodes pour implémenter cette fonction, dont les plus couramment utilisées sont l'attribut d'affichage et l'attribut de visibilité. Cet article explique comment utiliser les éléments CSS div pour réaliser les fonctions d'affichage et de masquage.

1. Attribut d'affichage

L'attribut d'affichage est utilisé pour contrôler si un élément est affiché. Cet attribut a plusieurs valeurs, les plus couramment utilisées sont block, inline et none. Leurs fonctions sont les suivantes :

1. block : restitue l'élément comme un élément de niveau bloc, c'est-à-dire affiché sur sa propre ligne. Par défaut, les éléments div sont des éléments de niveau bloc.
2. inline : affiche l'élément en tant qu'élément en ligne, c'est-à-dire affiché dans la même ligne, mais pas sur sa propre ligne. Par exemple, des éléments tels que a et span sont des éléments en ligne par défaut.
3. aucun : masque l'élément mais ne prend pas de place. À ce stade, l’élément ne sera ni affiché sur la page ni n’affectera la mise en page.

Pour implémenter la fonction afficher et masquer, nous pouvons le faire en modifiant la valeur de l'attribut d'affichage. Par exemple, pour masquer un élément div, vous pouvez utiliser le style CSS suivant :

.hidden {
    display: none;
}

Définissez d'abord un div dans la page HTML :

<div id="myDiv">这是一段要隐藏的内容</div>

Définissez ensuite un style show-hidden en CSS :

.showDiv {
    display: block;
}

.hideDiv {
    display: none;
}

Utilisez le code suivant dans JavaScript Pour changer d'affichage et de masquage :

var myDiv = document.getElementById('myDiv');
myDiv.classList.toggle('hideDiv');
myDiv.classList.toggle('showDiv');

Dans le code ci-dessus, l'attribut d'affichage de l'élément div est basculé entre les styles hideDiv et showDiv via la méthode toggle, afin que les effets d'affichage et de masquage puissent être obtenus.

2. Attribut de visibilité

L'attribut de visibilité est utilisé pour contrôler si un élément est visible. Cet attribut a également plusieurs valeurs, dont les plus couramment utilisées sont visibles et masquées. Leurs fonctions sont les suivantes :

1. visible : L'élément est visible, valeur par défaut.
2. caché : L'élément n'est pas visible mais prend de la place.

Contrairement à l'attribut display, l'attribut visibilité ne modifie pas la disposition et la position de l'élément. Si vous souhaitez simplement qu'un élément soit invisible mais prenne de la place, vous pouvez utiliser l'attribut visibilité:hidden.

Par exemple, voici un style qui souhaite masquer un élément div :

.visibility-hidden {
    visibility: hidden;
}

Définissez un élément div en HTML et définissez-lui un identifiant :

<div id="myDiv">这是一段要隐藏的内容</div>

Utilisez le code suivant en JavaScript pour masquer et afficher :

var myDiv = document.getElementById('myDiv');
myDiv.classList.toggle('visibility-hidden');

Dans le code ci-dessus, l'attribut de visibilité de l'élément div est basculé entre visibilité cachée et style sans ce nom de classe via la méthode bascule, afin que les effets d'affichage et de masquage puissent être obtenus.

3. Conclusion

Ce qui précède explique comment utiliser CSS pour contrôler l'affichage et le masquage des éléments div. Les deux méthodes peuvent produire des effets similaires, mais dans les situations réelles, il est nécessaire de choisir la méthode appropriée en fonction du scénario d'application spécifique. Également contrôlé via JS, des opérations plus flexibles et plus précises peuvent être réalisées.

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!