Maison > Article > interface Web > Méthode jQuery pour ajouter et supprimer les tags_jquery spécifiés

Méthode jQuery pour ajouter et supprimer les tags_jquery spécifiés

WBOYoriginal: 2016-05-16 15:25:271672parcourir

Comment jQuery ajoute et supprime un style pour une balise spécifiée :
Dans l'application réelle des pages Web, le style CSS des éléments doit être modifié en fonction de différentes conditions. Cette fonction peut être obtenue en ajoutant et en supprimant dynamiquement une classe CSS à l'élément. Voici un exemple de la façon d'implémenter cette fonction. .
1. Utilisez addClass() et removeClass() pour ajouter et supprimer une classe CSS :
L'exemple de code est le suivant :

<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>首页</title> 
<style type="text/css">
.mytest{
 border:1px solid green;
 width:100px;
 height:100px;
 color:red;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
 $("#add").click(function () {
 $("div").addClass("mytest");
 });
 $("#del").click(function () {
 $("div").removeClass("mytest");
 })
})
</script>
<body>
<div>珍惜当前，因为只有当前才是实实在在的</div>
<button id="add">添加样式</button>
<button id="del">删除样式</button>
</body>
</html>

Le code ci-dessus peut ajouter et supprimer des styles spécifiés. Ce qui précède n'est qu'une démonstration et peut être ajouté ou supprimé en fonction des besoins spécifiques.
2. Utilisez toggleClass() pour basculer entre l'ajout et la suppression de classes de style :
Si l'objet correspondant a la classe de style spécifiée, alors toggleClass() peut supprimer la classe spécifiée, sinon, la classe spécifiée sera ajoutée. La force du code est la suivante :

<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>首页</title> 
<style type="text/css">
.mytest{
 border:1px solid green;
 width:100px;
 height:100px;
 color:red;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
 $("#switch").click(function () {
 $("div").toggleClass("mytest");
 });
})
</script>
<body>
<div class="mytest">珍惜当前，因为只有当前才是实实在在的</div>
<button id="switch">删除与添加切换</button>
</body>
</html>

Le code ci-dessus peut être utilisé pour basculer entre la suppression et l'ajout de classes de style spécifiées. J'espère que vous pourrez le faire vous-même et que la récolte pourra être plus importante.

Déclaration：

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

Article précédent：Implémentation d'effets spéciaux de liaison provinciale et municipale basés sur jquery_jqueryArticle suivant：Implémentation d'effets spéciaux de liaison provinciale et municipale basés sur jquery_jquery

Articles Liés

Voir plus