Maison >interface Web >tutoriel CSS >Explication détaillée de trois méthodes de style CSS de l'élément opérationnel jQuery
Explication détaillée de trois méthodes de style CSS de l'élément opérationnel jQuery
- 高洛峰original
- 2017-03-13 10:15:301411parcourir
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.
<!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='btnClick()'>
<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>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!