Comment puis-je modifier CSS Afficher aucune propriété de blocage à l'aide de jQuery

La fonction JavaScript ou jQuery avec des propriétés d'affichage et d'affichage de blocs est utilisée pour masquer et afficher respectivement le contenu. Il doit y avoir des boutons affichés sur l'interface créée avec les balises HTML et les fonctions JavaScript se référant à ces boutons afin que la fonction Affichage et le bloc d'affichage fonctionne lorsque l'utilisateur clique sur le bouton respectif.

Création de boutons qui possèdent des propriétés «Afficher aucune» et «bloc d'affichage»

Les balises de bouton sont utilisées pour créer des boutons en HTML, et le jQuery (bibliothèque JavaScript) est ensuite utilisé pour ajouter des fonctionnalités aux boutons.

Exemple: Afficher aucun et un bloc d'affichage pour un conteneur div
Discutons-en avec un exemple simple pour masquer et afficher un conteneur Div à l'aide du «Afficher aucun" et "bloc de visualisation" propriétés:

Cacher
Afficher

Récipient Div

Dans l'extrait de code ci-dessus, il y a des balises pour créer des boutons et un conteneur div:

• Il y a la balise de bouton avec "bouton»Déclaré comme son type. À l'intérieur de la balise du bouton d'ouverture se trouve le «cacher”Classe créée, et entre les balises d'ouverture et de clôture est le texte qui apparaîtra sur le bouton.
• De même, il y a une autre balise de bouton avec la deuxième classe nommée montrer, Et le texte à afficher sur le bouton est "Afficher".
• Ensuite, il y a la balise Div avec l'ID nommé «démo,"Et puis le texte doit être affiché sur le conteneur div, je.e., "Récipient Div".

Dans l'élément de script ou dans un fichier JavaScript séparé, il devrait y avoir des fonctions avec des propriétés d'affichage et d'affichage des blocs:

$ (document).ready (function ()
$ (".cacher").cliquez sur (fonction ()
$ ("# démo").CSS ("affichage", "aucun");
);
$ (".montrer").cliquez sur (fonction ()
$ ("# démo").css ("affichage", "bloc");
);
);

Dans l'extrait de code ci-dessus, il y a les fonctions JavaScript ajoutées pour créer la fonctionnalité pour les boutons:

• Il y a le "prêt”Fonction qui exécute la fonction à l'intérieur lorsque le document ou la page Web HTML est chargé sur le navigateur.
• À l'intérieur du principal "prêt«Fonction, il y a le«Cliquez sur«Fonction qui fait référence au«cacher”Classe (la classe qui a été créée pour le bouton Masquer. À l'intérieur de cette fonction, il y a la fonction CSS avec le «Afficher aucun«Propriété faisant référence au«démo" identifiant. Cela signifie que lorsque l'utilisateur clique sur le «cacher"Bouton, le"Afficher aucun»La propriété exécutera.
• De même, il y en a un autre «Cliquez sur«Fonction avec le sélecteur de classe faisant référence au«Afficher"Classe et à l'intérieur de"Cliquez sur«Fonction, il y a la fonction CSS avec le«bloc de visualisation»Propriété avec le sélecteur d'identification faisant référence au«démo" identifiant.

L'impact de l'affichage non et les propriétés du bloc d'affichage sera la suivante:

C'est ainsi que le CSS affiche aucun et les propriétés du bloc d'affichage sont ajoutées à l'aide de jQuery.

Conclusion

Les propriétés d'affichage et de bloc d'affichage sont ajoutées et modifiées à l'aide de jQuery en créant deux fonctions CSS distinctes dans JavaScript, l'une avec la propriété Affichage Aucune et l'autre avec la propriété Block Affichage. Ces fonctions CSS doivent se référer à l'ID ou aux classes des boutons créés en HTML de sorte que lorsque l'utilisateur clique sur le bouton pertinent, la fonction d'affichage CSS invoque en conséquence.