JQuery est une bibliothèque JavaScript légère et amusante qui vous permet de manipuler CSS de différentes manières grâce à l'utilisation de diverses méthodes jQuery. En utilisant ces méthodes, vous pouvez définir les propriétés de style des éléments, soit vous pouvez soit ajouter ou supprimer un certain nom de classe d'un élément, soit peut-être basculer entre l'ajout ou la suppression des classes.

Les méthodes JQuery mentionnées ci-dessous sont utilisées pour manipuler CSS .

1. Méthode CSS ()
2. Méthode addClass ()
3. Méthode HasClass ()
4. Méthode de SuppeClass ()
5. Méthode toggleclass ()

Explorons-les en détail.

Méthode CSS ()

La méthode CSS () en jQuery est utilisée dans le but d'appliquer ou de récupérer une ou plusieurs propriétés de style à un élément HTML.

Syntaxe

css ("propriété", "valeur"); // pour définir une propriété CSS
CSS ("propriété"); // pour obtenir une propriété CSS

Exemple 1

Supposons que vous souhaitiez définir la couleur d'arrière-plan d'un élément en utilisant la méthode CSS () dans jQuery.

Html

C'est un paragraphe

Définir la couleur d'arrière-plan de Div

Dans le code ci-dessus, trois éléments HTML qui sont ,

, et sont créés.

jquery

$ (document).ready (function ()
$ (".bouton").cliquez sur (fonction ()
$ ("div").CSS ("Background-Color", "Rosybrown");
);
);

À l'aide de la méthode CSS (), nous modifions la couleur d'arrière-plan de l'élément uniquement à TEH Cliquez sur le bouton.

Sortir

La couleur d'arrière-plan de la div a été définie.

Exemple 2

Supposons que vous souhaitiez seulement extraire une propriété de style d'un élément HTML. Utilisez le code suivant.

Html

Un paragraphe.

Retour de la police de p de p

Dans le code ci-dessus,

, et des éléments ont été créés, en outre, le

L'élément a reçu une taille de police de 25px.

jquery

$ (document).ready (function ()
$ ("bouton").cliquez sur (fonction ()
alert ("font size =" + $ ("p").CSS ("Font-Size"));
);
);

Nous utilisons la méthode CSS () pour simplement récupérer la taille de la police du paragraphe. Une fois que vous avez cliqué sur le bouton, un message d'alerte apparaîtra affichant la taille de la police du paragraphe.

Sortir

Avant de cliquer sur le bouton.

Après avoir cliqué sur le bouton.

La taille de la police du paragraphe a été extraite.

Méthode addClass ()

Comme son nom l'indique, la méthode jQuery addClass () est utilisée pour ajouter des noms de classe unique ou multiples à un élément HTML.

Syntaxe

$ (sélecteur).addClass (className, funcname (index, currentClass))

Note: Le nom du cours est un paramètre requis qui indique le nom de classe à ajouter et le funcname est un paramètre facultatif qui spécifie une fonction pour récupérer un nom de classe à ajouter.

Exemple

Supposons que vous ayez défini un élément similaire plus d'une fois dans une page Web et que vous souhaitez ajouter une classe à un seul de ces éléments. Utilisez le code suivant.

Html

Premier paragraphe.

Dernier paragraphe.

Ajoutez un nom de classe au dernier paragraphe

Dans le code ci-dessus, nous en avons créé deux

Tags et un élément.

CSS

.note
taille de police: 160%;
Couleur bleue;

Ici, nous avons défini un style pour une classe «note».

jquery

$ (document).ready (function ()
$ ("bouton").cliquez sur (fonction ()
$ ("p: dernier").addClass ("note");
);
);

Dans le code ci-dessus, une classe est ajoutée par le nom «note» au dernier

élément. Par conséquent, sur le clic de bouton, le style défini pour la classe de notes sera appliqué au dernier paragraphe.

Sortir

La classe «note» a été ajoutée avec succès au dernier paragraphe.

Méthode HasClass ()

Dans le but d'évaluer si un élément a une classe ou non, la méthode hasclass () est utilisée. Cette méthode s'affiche vraie si elle détecte une classe ou autrement fausse.

Syntaxe

$ (sélecteur).HasClass (ClassName)

Note: Le nom du cours est un paramètre requis qui est utilisé pour spécifier un nom de classe à rechercher.

Exemple

Supposons que vous souhaitiez vérifier s'il y a une classe appliquée à un certain ensemble d'éléments similaires. C'est comme ça que tu fais.

Html

Un paragraphe.

Un autre paragraphe.

Est-ce que tout élément p a une classe "principale"?

Dans ce code HTML, nous en avons créé deux

éléments et un élément. En plus de cela, le premier

L'élément a été affecté à la classe «Main».

jquery

$ (document).ready (function ()
$ ("bouton").cliquez sur (fonction ()
alerte ($ ("p").HasClass ("Main"));
);
);

Dans le code ci-dessus, un message d'alerte a été conçu qui reviendra vrai lorsque la méthode Hasclass () détecte une classe avec le nom de «Main».

Sortir

La méthode hasclass () fonctionne correctement.

Méthode de SuppeClass ()

Aux fins de la suppression d'un nom de classe unique ou multiple des éléments HTML, la méthode reroveClass () est utilisée.

Syntaxe

$ (sélecteur).RemoveClass (className, funcname (index, currentClass))

Note: Le nom du cours Le paramètre spécifie le nom de classe à supprimer et le funcname Le paramètre spécifie une fonction qui récupère les noms de classe unique ou multiples à supprimer. Les deux sont des paramètres facultatifs.

Exemple

Supposons que vous souhaitiez supprimer une classe d'un certain élément HTML. Utilisez le code ci-dessous.

Html

En-tête 1

En-tête 2

En tête 3

Retirez la classe "tête" de l'élément H1.

Nous avons créé quatre éléments HTML qui sont

,

,

, et . De plus, nous avons appliqué une «tête» de classe à la

élément.

CSS

.diriger
Opacité: 0.4;

La tête de classe a reçu un peu de style via CSS.

jquery

$ (document).ready (function ()
$ ("bouton").cliquez sur (fonction ()
$ ("H1").RemoveClass ("Head");
);
);

Dans le code ci-dessus, RemoveClass () a été appliqué pour supprimer la classe «tête» de

élément.

Sortir

La classe «tête» a été supprimée du

élément.

Méthode toggleclass ()

Cette méthode passe entre l'ajout ou la suppression des noms de classe unique ou multiples des éléments HTML. Il fonctionne d'une manière qu'il ajoute le nom de classe aux éléments où il manque et supprime le nom de classe des éléments où il a déjà été défini.

Syntaxe

$ (sélecteur).toggleclass (className, funcname (index, currentClass), toggle)

Dans la syntaxe ci-dessus:

• Le nom du cours est un paramètre requis qui est utilisé pour spécifier un nom de classe pour être ajouté ou supprimé d'un élément.
• Le funcname paramètre Spécifiez une fonction qui obtient un nom de classe à ajouter ou supprimé.
• D'un autre côté, le basculer Le paramètre est un booléen valeur qui indique si le nom de classe doit être ajouté (vrai) ou supprimé (false).

Les deux funcname, et bascule sont des paramètres facultatifs.

Exemple

Supposons que vous souhaitiez basculer un nom de classe entre plusieurs éléments HTML. Suivez le code ci-dessous.

Html

En-tête 1

En-tête 2

En tête 3

Basculer

Quatre éléments HTML sont en cours de création qui sont

,

,

, et .

CSS

.diriger
Couleur bleue;
Opacité: 0.3;

En utilisant CSS, une classe du nom «tête» a reçu un certain style.

jquery

$ (document).ready (function ()
$ ("bouton").cliquez sur (fonction ()
$ ("H1, H2, H3").toggleClass ("tête");
);
);

Dans le code ci-dessus, la classe «tête» est basculée parmi

,

, et

éléments.

Sortir

Vous devez cliquer plusieurs fois sur le bouton pour voir l'effet basculé.

La classe de bascule fonctionne correctement.

Conclusion

Le CSS peut être manipulé par l'utilisation de diverses méthodes jQuery qui sont; La méthode CSS () applique ou récupére une ou plusieurs propriétés de style d'un élément, la méthode addClass () ajoute des noms de classe aux éléments, le hasclass () détecte si un élément a une classe ou non, le SupoveClass () supprime les noms de classe des noms de classe de éléments, et toggleclass () bascule entre l'ajout ou la suppression des noms de classe des éléments. Ces méthodes sont expliquées en détail à l'aide d'exemples pertinents.