Maison >interface Web >js tutoriel >Comment changer le style CSS avec jq

Comment changer le style CSS avec jq

醉折花枝作酒筹
醉折花枝作酒筹original
2021-04-21 13:40:555140parcourir

Dans jquery, vous pouvez utiliser la méthode css() pour changer le style. Le format de syntaxe est "$("Element Name").css("Attribute Name", "Attribute Value"); () paramètres de la méthode Ou renvoie une ou plusieurs propriétés de style de l'élément sélectionné, en définissant la propriété CSS spécifiée pour tous les éléments correspondants.

Comment changer le style CSS avec jq

L'environnement d'exploitation de ce tutoriel : système Windows 7, JavaScript version 1.8.5, ordinateur Dell G3.

Introduisez jQuery, puis définissez le style de l'élément en fonction de votre propre élément. Ici, vous pouvez définir avec désinvolture le style du div.

Comment changer le style CSS avec jq

Ensuite, nous examinons les effets apportés par le style, puis commençons à configurer des effets interactifs tels que le changement de couleur lorsque vous cliquez sur le bouton.

Comment changer le style CSS avec jq

Tout d'abord, il est naturel de préciser l'événement qui déclenche le changement de couleur, qui peut être déclenché, etc. Ici je vais cliquer pour déclencher le changement de couleur.

Comment changer le style CSS avec jq

Comme le montre l'image, vous pouvez utiliser css() pour écraser le style de l'élément d'origine.

Comment changer le style CSS avec jq

Si vous modifiez le style d'un seul élément, séparez-les par des virgules.

Comment changer le style CSS avec jq

De cette façon, vous pouvez obtenir l'effet interactif, mais ce n'est qu'un changement dans l'effet de style. Comment faire plusieurs effets ?

Comment changer le style CSS avec jq

Vous pouvez placer plusieurs styles entre accolades, séparer les styles par des virgules et utiliser des deux-points pour les valeurs de style, afin que cela soit efficace.

Comment changer le style CSS avec jq

L'interaction de style finale est terminée et plusieurs styles seront modifiés

Comment changer le style CSS avec jq

[Apprentissage recommandé : Tutoriel avancé Javascript

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn