Comment masquer un élément dans jquery

Comment masquer un élément dans jquery : 1. Créez un exemple de fichier HTML ; 2. Définissez l'identifiant de l'élément ; 3. Masquez l'élément via la méthode "$("#id").hide()".

L'environnement d'exploitation de cet article : système Windows 7, jquery version 3.2.1, ordinateur DELL G3

Comment cacher un élément dans jquery ?

Plusieurs façons de contrôler le masquage et l'affichage des éléments avec jquery :

L'organisation est légèrement brouillonne, soyez patient !

Utilisez jquery pour contrôler l'affichage et le masquage des div, ce qui peut être fait en une seule phrase, par exemple :

1.$("#id").show() est exprimé sous la forme display: block,

$("#id" ).hide() est exprimé sous la forme display:none;

2.$("#id").toggle() change l'état visible de l'élément. Si l'élément est visible, passez-le en masqué ; si l'élément est masqué, passez-le en visible.

3.$("#id").css('display','none');//Masquer

$("#id").css('display','block');//Afficher

Ou

$("#id")[0].style.display='none';

　 display=none contrôle la recherche cachée des objets

　display=block contrôle l'affichage des objets

4.$ (" #id").css('visibility','hidden');//Élément caché

$("#id").css('visibility','visible');//Élément affiché

CSS propriété de visibilité Spécifie si l'élément est visible.

visible L'élément est visible.

hidden L'élément est invisible.

collapse Lorsqu'elle est utilisée dans un élément de tableau, cette valeur peut supprimer une ligne ou une colonne, mais elle n'affecte pas la disposition du tableau. L'espace occupé par une ligne ou une colonne est libéré pour d'autres contenus. Si cette valeur est utilisée sur un autre élément, elle sera rendue "cachée".

inherit Hérite de la valeur de l'attribut de visibilité de l'élément parent.

Remarque :

display:none et visible:hidden peuvent tous deux masquer un élément sur la page Web. Il n'y a pas de différence dans les effets visuels, mais il existe une différence entre les deux dans certaines opérations DOM :

display:none -. -- Aucun espace physique n'est réservé à l'objet caché, c'est-à-dire que l'objet disparaît complètement de la page et, en termes simples, ne peut pas être vu ou touché.

visible:hidden--- rend l'objet invisible sur la page Web, mais l'espace occupé par l'objet sur la page Web ne change pas, c'est-à-dire qu'il a toujours des attributs tels que la hauteur, la largeur, etc. En termes simples , on ne peut pas le voir mais on peut le toucher.

//第1种方法 ,给元素设置style属性  
$("#hidediv").css("display", "block");  
//第2种方法 ,给元素换class，来实现隐藏div，前提是换的class样式定义好了隐藏属性  
$("#hidediv").attr("class", "blockclass");  
//第3种方法,通过jquery的css方法，设置div隐藏  
$("#blockdiv").css("display", "none");  
  
$("#hidediv").show();//显示div    
$("#blockdiv").hide();//隐藏div

Apprentissage recommandé : "Tutoriel vidéo jquery"

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!