Comment ajouter ou supprimer des styles CSS dans jQuery

Au travail, j'ai souvent besoin d'utiliser Javascript pour changer le style des éléments de la page. Une solution consiste à modifier la classe CSS (Class) de l'élément de page. En Javascript traditionnel, nous le faisons généralement en traitant l'attribut classname de HTML Dom ; jQuery propose trois méthodes pour réaliser cette fonction, bien que l'idée soit similaire à celle-ci. méthode traditionnelle, mais cela permet d'économiser beaucoup de code. Toujours la même phrase - "jQuery rend le code JavaScript concis !"

1. addClass() - Ajouter une classe CSS

$("#target"). "newClass");
//#target fait référence à l'ID de l'élément auquel le style doit être ajouté
//newClass fait référence au nom de la classe CSS

2. removeClass( ) - Supprimer la classe CSS

$("#target").removeClass("oldClass");
//#target fait référence à l'ID de l'élément dont la classe CSS doit être supprimé
//oldClass fait référence au nom de la classe CSS

3. toggleClass() - Ajoutez ou supprimez la classe CSS

Si le La classe CSS existe déjà, elle sera supprimée ; à la place, si la classe CSS n’existe pas, elle sera ajoutée.

$("#target").toggleClass("newClass")
//Si l'élément avec l'ID "target" a un style CSS défini, il sera supprimé
// Sinon ; , la classe CSS "newClass" se verra attribuer l'ID.

Dans l'application réelle, nous définissons souvent ces classes CSS en premier, puis modifions le style des éléments de page via le déclenchement d'événements Javascript (comme cliquer sur un lien). De plus, jQuery fournit également une méthode hasClass("className") pour déterminer si une classe CSS a été attribuée à un élément.

FAQ :

<label for="TrueName" generated="true" class="msg-error" style="">正确</label>

Par addClass("msg-success");

<label for="TrueName" generated="true" class="msg-error msg-success" style="">正确</label>

CSS文件
误：（msg-success将被msg-error覆盖，样式不变）
span.msg-error, label.msg-error{color: #f00;}
span.msg-success, label.msg-success{color: #000;}
正：
span.msg-error, label.msg-error{color: #f00;}
span.msg-success, label.msg-success{color: #000;}

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!