recherche

Maison >interface Web >js tutoriel >Trois façons pour jQuery de manipuler l'élément CSS styles_jquery

Trois façons pour jQuery de manipuler l'élément CSS styles_jquery

WBOY
WBOYoriginal
2016-05-16 16:46:281069parcourir

Nous utilisons souvent Javascript pour modifier 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").addClass("newClass"); /#target fait référence à l'ID de l'élément qui doit être stylisé
//newClass fait référence au nom de la classe CSS
2 removeClass() - supprime la classe CSS
$("#target. " ).removeClass("oldClass");
//#target fait référence à l'ID de l'élément dont la classe CSS doit être supprimée
//oldClass fait référence au nom de la classe CSS
3. toggleClass() - Ajouter ou supprimer une classe CSS : Si la classe CSS existe déjà, elle sera supprimée, à l'inverse, 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é
//Au contraire, CSS La classe "newClass" se verra attribuer cet 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.

Vous trouverez ci-dessous un exemple complet.

Copier le code Le code est le suivant :
Image scintillante
🎜>< /tête>

/>