Maison > interface Web > js tutoriel > JQuery exploite le style CSS de element_jquery

JQuery exploite le style CSS de element_jquery

WBOY
Libérer: 2016-05-16 16:10:35
original
1335 Les gens l'ont consulté

Nous utilisons souvent Javascript pour modifier le style des éléments de la page. Une façon est de changer la méta de la page

Classe CSS Element (Class), en Javascript traditionnel, nous traitons généralement le HTML

La fonctionnalité de nom de classe de Dom est implémentée ; jQuery fournit trois méthodes pour implémenter cette fonction,

Bien qu'elles aient les mêmes idées que les méthodes traditionnelles, elles économisent beaucoup de code. Toujours la même phrase –

« jQuery rend le code JavaScript concis ! »

1. addClass() – Ajouter une classe CSS

Copier le code Le code est le suivant :

$("#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() – Supprimer la classe CSS

Copier le code Le code est le suivant :

$("#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

En revanche, si la classe CSS n'existe pas, elle sera ajoutée.

Copier le code Le code est le suivant :

$("#target").toggleClass("newClass")
//Si l'élément avec l'ID "target" a un style CSS défini, il sera supprimé
; //Au contraire, la classe CSS "newClass" sera attribuée à l'ID.

Dans l'application réelle, nous définissons souvent ces classes CSS en premier, puis les déclenchons via des événements Javascript

Publier (par exemple en cliquant sur un lien) pour modifier le style des éléments de la page. De plus, jQuery fournit également une méthode

La méthode

hasClass("className") est utilisée pour déterminer si un élément s'est vu attribuer une classe CSS.

Vous trouverez ci-dessous un exemple complet.

Copier le code Le code est le suivant :

Image clignotante
Hahaha


<script> Fonction btnClick(){ <br> //$("#soccer").removeClass("up"); <br> $("#soccer").toggleClass("haut"); <br> //$("p:first").removeClass("intro"); <br> }  <br> </script>




Ce qui précède représente l'intégralité du contenu de cet article sur les styles CSS exploitant jQuery. J'espère que vous l'aimerez.
Étiquettes associées:
source:php.cn
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal