Comment styliser des éléments HTML à jQuery

Les propriétés de style pour les éléments HTML sélectionnées sont attribuées ou renvoyées à l'aide de la jQuery CSS () méthode. Lorsqu'il est utilisé comme fonction Getter, il renvoie la valeur de la propriété du premier élément HTML correspondant. Vous pouvez également l'utiliser pour définir les propriétés CSS uniques ou multiples de tous les éléments correspondants.

Cet article discutera de la procédure de Style Elements HTML en jQuery. Nous démontrerons également quelques exemples appropriés liés à la méthode CSS (). Alors, commençons!

Comment obtenir la propriété CSS des éléments HTML à jQuery

Dans jQuery, vous pouvez obtenir la propriété CSS spécifiée des éléments HTML en passant le «nom de la propriété«Comme argument dans la méthode CSS (). Pour ce faire, vous devez suivre la syntaxe dirigée ci-dessous:

$ (sélecteur).CSS ("PropertyName");

Vous pouvez ajouter une jQuery "sélecteur”Pour sélectionner les éléments HTML, et la méthode CSS () est utilisée pour récupérer les valeurs de la propriété passée.

Exemple: Obtenir la propriété CSS des éléments HTML à jQuery
Dans notre "indice.html", Nous avons ajouté un bouton et trois éléments de paragraphes et réglé leur"Couleur de l'arrière plan»Valeur de la propriété CSS:

C'est le premier paragraphe.

C'est le 2e paragraphe.

C'est le 3ème paragraphe.

Vérifier l'arrière-plan

Ensuite, dans notre fichier JavaScript qui est nommé «mon projet.js», Nous rédigerons le code suivant:

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

Lorsque l'utilisateur clique sur «Vérifier l'arrière-plan”Bouton, JQuery recherchera le"p»Ou paragraphes et obtenez le«Couleur de l'arrière plan»Propriété CSS du premier élément correspondant. En fin de compte, une boîte d'alerte sera affichée sur le navigateur comprenant la valeur de la propriété de «Couleur de l'arrière plan»:

Après avoir ajouté le code dans notre "indice.html», Nous allons l'exécuter en utilisant le«Serveur de foie»VS Extension de code:

Cliquez sur le "Vérifier l'arrière-plan"Le bouton vous informera de la propriété CSS de couleur arrière du premier paragraphe dans une boîte d'alerte:

Comment définir la propriété CSS des éléments HTML à jQuery

La méthode jQuery CSS () vous permet également de définir les propriétés CSS des éléments HTML. Si vous souhaitez modifier les valeurs de propriété d'un élément HTML, alors passez le «nom de la propriété" et "valeur«Comme arguments à la méthode CSS (). Les deux arguments doivent être séparés par la virgule:

$ (sélecteur).CSS ("PropertyName", "Value");

Exemple: Définition de la propriété CSS des éléments HTML à JQuery
Dans cet exemple, nous allons définir le «Couleur de l'arrière plan»Propriété CSS de tous les éléments de paragraphe:

C'est un titre

C'est le premier paragraphe.

C'est le 2e paragraphe.

C'est le 3ème paragraphe.

C'est un paragraphe.

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

Lorsque l'utilisateur cliquera sur le bouton fourni, il définira la couleur d'arrière-plan de chaque élément de paragraphe sur «jaune»:

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

Vous pouvez voir à partir de la sortie ci-dessous que le «Couleur de l'arrière plan«La valeur de la propriété CSS des éléments de paragraphe est désormais modifiée en«jaune»:

Comment définir plusieurs propriétés CSS des éléments HTML dans jQuery

Pour définir plusieurs propriétés CSS des éléments HTML avec la méthode CSS (), vous devez suivre la syntaxe dirigée ci-dessous:

CSS ("PropertyName": "Value", "PropertyName": "Value",…);

Ici, vous devez écrire les propriétés et leurs valeurs dans un format d'objet de valeur clé, séparée par des virgules.

Exemple: Définition de plusieurs propriétés CSS des éléments HTML dans jQuery
Dans cet exemple, nous changerons le «Couleur de l'arrière plan" et "taille de police«Pour tous les éléments de paragraphe supplémentaires:

C'est un titre

C'est le premier paragraphe.

C'est le 2e paragraphe.

C'est le 3ème paragraphe.

C'est un paragraphe.

Définir plusieurs propriétés CSS

Sur "bouton"Cliquez sur l'événement, jQuery sélectionnera l'élément de paragraphes et définira leur couleur d'arrière-plan sur"jaune"Et la taille de la police à"150%»:

$ (document).ready (function ()
$ ("bouton").cliquez sur (fonction ()
$ ("p").CSS ("Background-Color": "Yellow", "Font-Size": "150%");
);
);

La sortie fournie ci-dessus signifie que nous avons réussi à définir les multiples propriétés CSS spécifiées des éléments HTML sélectionnés.

Conclusion

La méthode jQuery CSS () est utilisée pour styliser ou modifier les propriétés CSS des éléments HTML sélectionnés. Il peut être utilisé de diverses manières, de l'obtention de la valeur de la propriété CSS à la définition de propriétés HTML uniques et multiples. Cette rédaction a discuté de la procédure de style des éléments HTML à jQuery, et nous avons également démontré quelques exemples appropriés liés à la méthode CSS ().