Maison > interface Web > tutoriel CSS > le corps du texte

Explication détaillée de trois méthodes de style CSS de l'élément opérationnel jQuery

高洛峰
Libérer: 2017-03-13 10:15:30
original
1406 Les gens l'ont consulté

jQuery propose trois méthodes pour modifier le style des éléments de la page. Bien qu'elles soient similaires aux méthodes traditionnelles, elles économisent beaucoup de code

Nous utilisons souvent Javascript pour modifier le style de. l'élément de 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 et jQuery. fournies pour implémenter cette fonction. Bien qu’elles reprennent 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
$("#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.

Le code est le suivant :

<!DOCTYPE HTML> 
<head> 
<title>图片闪烁</title> 
<style type="text/css"> 

@-webkit-keyframes twinkling{ /*透明度由0到1*/ 
0%{ 
opacity:0; /*透明度为0*/ 
} 
100%{ 
opacity:1; /*透明度为1*/ 
} 
} 

.up{ 
-webkit-animation: twinkling 1s infinite ease-in-out; 
} 
</style> 

</head> 
<body> 
<p id="soccer" class="up"> 
哈哈 
</p> 
<br/> 
<input type="button" onclick=&#39;btnClick()&#39;> 
<script src="./jQuery/jquery-1.8.3.js" type="text/javascript"></script> 
<script> 

function btnClick(){ 
//$("#soccer").removeClass("up"); 
$("#soccer").toggleClass("up"); 
//$("p:first").removeClass("intro"); 
} 
</script> 
</body> 
</html>
Copier après la connexion



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:
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