communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > js tutoriel > jquery définit le style de classe de l'élément

jquery définit le style de classe de l'élément

无忌哥哥
Libérer： 2018-06-29 13:48:11
original
1724 Les gens l'ont consulté

jquery définit le style de classe d'un élément

Méthodes pour définir les styles d'éléments

1 Spécifiez les règles de style de classe à appliquer en définissant l'attribut de classe de la balise

<.> 2 . Définissez directement l'attribut de style de la balise pour réinitialiser le style de l'élément actuel

1. Appliquer le style de classe : addClass()

$(&#39;#pic&#39;).addClass(&#39;circle&#39;)
$(&#39;#pic&#39;).addClass(&#39;circle shadow&#39;)
Copier après la connexion
Copier après la connexion
2. RemoveClass() 

$(&#39;#pic&#39;).removeClass(&#39;circle&#39;)
$(&#39;#pic&#39;).removeClass(&#39;shadow&#39;)
$(&#39;#pic&#39;).removeClass(&#39;circle shadow&#39;)
Copier après la connexion
3. Changement de style automatique : ToogleClass()

Si aucun style de classe n'est ajouté à l'élément actuel, le style de classe spécifié par celui-ci sera automatiquement ajouté. 

$(&#39;#pic&#39;).toggleClass(&#39;circle shadow&#39;)
Copier après la connexion
Copier après la connexion
Si un style de classe a été ajouté à l'élément actuel, alors il supprimera le style de classe

Ajoutez d'abord un style de classe à l'élément

$(&#39;#pic&#39;).addClass(&#39;circle&#39;)
$(&#39;#pic&#39;).addClass(&#39;circle shadow&#39;)
Copier après la connexion
Copier après la connexion
Maintenant, l'opération de suppression est effectuée

$(&#39;#pic&#39;).toggleClass(&#39;circle shadow&#39;)
Copier après la connexion
Copier après la connexion
4. Style de classe de requête : hasClass()

var res = $(&#39;#pic&#39;).hasClass(&#39;circle shadow&#39;) //false
$(&#39;#pic&#39;).addClass(&#39;circle shadow&#39;) 
var res = $(&#39;#pic&#39;).hasClass(&#39;circle shadow&#39;) //true
if ($(&#39;#pic&#39;).hasClass(&#39;circle shadow&#39;)) {
$(&#39;#pic&#39;).removeClass(&#39;circle shadow&#39;)
} else {
$(&#39;#pic&#39;).addClass(&#39;circle shadow&#39;) 
}
Copier après la connexion
//Afficher les résultats sur la console

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!

Étiquettes associées：
jquery设置元素，jquery设置样式
source：php.cn
Article précédent：Comment utiliser Vue.js combiné avec l'éditeur de texte enrichi Ueditor Article suivant：Introduction à la méthode d'unification du style de codage Vue dans vscode
Déclaration de ce site Web
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
Derniers articles par auteur
Derniers numéros
Les styles SASS ont priorité sur les requêtes multimédias J'essaie d'utiliser des requêtes multimédias pour remplacer les styles des appareils de bu...
Depuis 2024-04-05 15:03:00
0
1
3396
Besoin d'un script jquery pour déplacer les options sélectionnées à partir d'une zone de sélection en fonction de la sélection actuelle de l'utilisateur final J'ai une page HTML où l'utilisateur final peut classer nos articles via un élément de boît...
Depuis 2024-04-04 18:40:04
0
1
3528
Comment puis-je mettre à jour le seul élément « actif » de la liste ? Supposons que vous ayez 4 éléments, un seul d’entre eux peut avoir le nom de classe actif....
Depuis 2024-04-02 20:32:27
0
1
389
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal