Puisque nous savons tous que nous pouvons effectuer de nombreuses tâches amusantes en utilisant jQuery en raison de son programme léger et «écrire moins, faire plus». Une telle tâche consiste à rendre les modifications des propriétés de style CSS des éléments HTML. Vous pouvez changer CSS en utilisant le CSS () Méthode de jQuery.

Ici, dans ce guide, nous avons expliqué cette méthode en détail, en outre, nous avons démontré différents exemples qui vous aident à mieux comprendre la méthode et son utilisation.

Méthode CSS ()

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

Syntaxe

Pour appliquer une propriété CSS.

css ("propriété", "valeur");

Pour récupérer une propriété CSS.

CSS ("propriété");

Pour appliquer plusieurs propriétés CSS.

css ("propriété": "valeur", "propriété": "valeur"…);

Pour mieux comprendre la méthode CSS (), explorons quelques exemples.

Exemple 1: Comment définir une propriété CSS

Supposons que vous souhaitiez définir la couleur d'arrière-plan d'un

élément utilisant la méthode CSS () dans jQuery.

Html

Définir une propriété CSS

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

Dans le code HTML ci-dessus, nous avons créé un

, et un élément.

jquery

$ (document).ready (function ()
$ (".bouton").cliquez sur (fonction ()
$ ("H1").CSS ("fond-couleur", "jaune");
);
);

Dans le code jQuery ci-dessus, nous avons appliqué une couleur de fond jaune au

élément utilisant la méthode CSS ().

Sortir

Avant de cliquer sur le bouton.

Après avoir cliqué sur le bouton.

La couleur d'arrière-plan de l'en-tête a été définie avec succès.

Comment récupérer une propriété CSS

Supposons que vous souhaitiez récupérer toute propriété CSS d'un élément, par exemple, la couleur d'arrière-plan d'un élément div. Suivez le code ci-dessous.

Html

Bonjour le monde

Retour en arrière-plan-couleur de div

Ici, nous avons créé un et un élément.

jquery

$ (document).ready (function ()
$ ("bouton").cliquez sur (fonction ()
alert ("background color =" + $ ("div").CSS ("Background-Color"));
);
);

Dans le code ci-dessus, la méthode CSS () est utilisée uniquement pour extraire la couleur d'arrière-plan attribuée à l'élément. De plus, un message d'alerte a été créé qui affichera la couleur d'arrière-plan du div.

Sortir

La couleur d'arrière-plan de l'élément div a été récupérée et affichée avec succès.

Comment définir plusieurs propriétés CSS

Supposons que vous souhaitiez attribuer plusieurs propriétés de style à n'importe quel élément HTML en une seule fois. Suivez l'exemple ci-dessous.

Html

Un paragraphe.

Définir plusieurs styles

Dans le code ci-dessus, nous avons créé un

élément avec un élément.

jquery

$ (document).ready (function ()
$ ("bouton").cliquez sur (fonction ()
$ ("p").CSS ("Background-Color": "Yellow", "Padding": "25px", "Width": "200px");
);
);

En utilisant la méthode jQuery CSS (), nous avons appliqué une couleur d'arrière-plan au

élément et lui a attribué un rembourrage et une largeur.

Sortir

Il peut être vérifié à partir de la sortie ci-dessus que plusieurs styles sont appliqués au paragraphe en même temps.

Conclusion

Vous pouvez modifier CSS en utilisant la méthode jQuery CSS () qui est utilisée dans le but d'obtenir ou de définir les propriétés de style d'un élément. En utilisant cette méthode, vous pouvez appliquer plusieurs styles à un HTML en une seule fois en manipulant les propriétés de style CSS. Ce tutoriel vous guide sur la façon de changer CSS de diverses manières via la méthode jQuery CSS () ainsi que les exemples pertinents pour une meilleure compréhension.