Comment afficher et masquer les CSS Div

Comment afficher et masquer les divs en CSS : 1. Utilisez l'attribut display de CSS pour masquer ou afficher le div ; 2. Utilisez l'attribut de visibilité de CSS pour masquer ou afficher le div.

L'environnement d'exploitation de cet article : système Windows 7, version HTML5&&CSS3, ordinateur Dell G3.

Trois façons d'afficher ou de masquer les divs à l'aide de CSS (la différence entre l'affichage et la visibilité)

1. Utilisez l'attribut d'affichage de CSS pour masquer ou afficher les divs : <.>

L'attribut display spécifie le type de boîte que l'élément doit générer. Vous pouvez masquer un élément par display : none.

style="display: none;"
document.getElementById("typediv1").style.display="none";//隐藏
document.getElementById("typediv1").style.display="";//显示

2. Utilisez l'attribut visibilité CSS pour masquer ou afficher le div :

L'attribut visibilité spécifie si un élément est visible. Vous pouvez masquer un élément via visibilité : caché.

style="visibility: none;"
document.getElementById("div1").style.visibility="hidden";//隐藏
document.getElementById("div1").style.visibility="visible";//显示

La différence entre les attributs d'affichage et de visibilité :

L'attribut d'affichage définit la façon dont un élément doit être affiché, tandis que l'attribut de visibilité spécifie si un élément doit être visible ou masqué.

Masquer les éléments -display:aucun ou visibilité:hidden

Masquer un élément en définissant l'attribut d'affichage sur aucun ou l'attribut de visibilité sur caché. Notez cependant que ces deux méthodes produiront des résultats différents.

visibility:hidden : Un élément peut être masqué, mais l'élément masqué doit toujours occuper le même espace qu'avant, c'est-à-dire que même si l'élément est masqué, cela affectera toujours le. mise en page.

h1.hidden {visibility:hidden;}

display:none : Vous pouvez masquer un élément, et l'élément masqué n'occupera aucun espace. Autrement dit, non seulement l’élément est masqué, mais l’espace initialement occupé par l’élément disparaîtra également de la mise en page.

h1.hidden {display:none;}

Ainsi, l'affichage et la visibilité contrôlent si l'élément html existe et s'il est affiché respectivement. L'attribut de dispay définit si l'élément existe ou non, tandis que l'attribut de visibilité contrôle uniquement si l'élément est affiché en fait. , ça existe toujours.

[Apprentissage recommandé :

Tutoriel vidéo CSS]

Utilisez les méthodes show() et hide() de JQuery pour afficher ou masquer un div :

Le

• La méthode show() implémente l'affichage et le masquage des éléments sélectionnés :

Remarque : show() est applicable aux éléments masqués par la méthode jQuery et display:none en CSS ( Vous appliquez la visibilité : masquée aux éléments masqués).

Syntaxe : $ (selector).show(speed,easing,callback) Cliquez ici pour plus de détails sur les paramètres spécifiques

$("button").click(function(){
    $("p").show();
});

• méthode hide() pour masquer l'élément sélectionné :

Conseil : ceci est similaire à la propriété CSS display:none.

Remarque : Les éléments masqués ne seront pas entièrement affichés (n'affecte pas la mise en page de la page).

Syntaxe : $ (selector).hide(speed,easing,callback) Pour plus de détails sur des paramètres spécifiques, cliquez ici

$("button").click(function(){
    $("p").hide();
});

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!