简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Maison> interface Web> js tutoriel> le corps du texte

jq怎么恢复原来的css样式

醉折花枝作酒筹
Libérer： 2023-01-05 16:14:17
original
2768 Les gens l'ont consulté

在jquery中，可以使用“addClass()”方法恢复原来的样式，语法格式为“$("元素名称").addClcss("属性名","属性值")”；“addClass()”方法向被选元素添加一个或多个类，不会移除已存在的class属性。

jq怎么恢复原来的css样式

本教程操作环境：windows7系统、jquery1.11.1版、Dell G3电脑。

新建一个html文件，命名为test.html，用于讲解jquery怎么恢复默认的css。

`]DS]@)A$TKBA9)S[}9[KHE.png

在test.html文件内，使用div标签创建一个模块，并设置div的class属性为testdiv。

在css标签内，定义一个testdiv类名的样式，设置宽度为100px，高度为120px，背景颜色为黄色。

6}@@TK(2CNV$C$_}2OZ_A5K.png

在test.html文件内，使用button标签创建两个按钮，一个是“移除css”，“恢复css”。

3`DJ(QI`MF13JKAB8BC1_L9.png

在test.html文件内，分别给两个button按钮绑定onclick()点击事件，当按钮被点击时，分别执行delcss()函数，addcss()函数。

R$6D~A`D`Q[5XR$W@[)0213.png

在js标签中，分别创建delcss()函数和addcss()函数，在delcss()函数内，通过class(testdiv)获得div对象，使用removeAttr()方法移除class，实现去除css样式；在addcss()函数，通过元素名称获得div对象，使用addClass(）方法给div对象添加原来的class，从而实现恢复默认的css。

K~7QH$`3Q55[VWG}U)JPU]S.png

在浏览器打开test.html文件，分别点击按钮，查看实现的效果。

Q)WAP4_)E@2@_VEJDMMMTY7.png

$E6ZY3O94PTX3T`EKG)J$X9.png

@5Z4CKK8}BUAJ_(9CFI]WBF.png

【推荐学习：javascript高级教程】

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：
css
source：php.cn
Article précédent：Javascript如何复制对象 Article suivant：js数组怎么删除某一项
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
Derniers articles par auteur
Derniers numéros
Modifications du sélecteur dans Vue.js : définition des données sélectionnées pour les sélecteurs et les sélecteurs d'événements dans les boucles Je dois exécuter une fonction de type jq dans vuejs : -html@foreach($usersas$user)<...
Depuis 2023-09-11 09:59:53
0
1
272
Utiliser jq pour appeler Ajax montrera ce qui se passe lorsque Ajax n'est pas une méthode $.ajax({ type:"get", url:"js/data.txt", success: function(data) { cons...
Depuis 2023-03-24 18:16:34
0
1
252
Renseignez-vous sur jq Pourquoi est-ce toujours faux ? Deuxièmement, il y a plusieurs questions incorrectes dans ...
Depuis 2020-12-12 15:16:59
0
1
1066
À propos de l'utilisation de base de JQ $() s'écrit directement comme ceci. Quelle est la différence entre $(document).redy(functi...
Depuis 2019-01-06 17:05:25
0
2
988
Comment parcourir deux ou plusieurs tableaux en php ou jq, chaque tableau comporte deux éléments, comme indiqué ci-dessous Par exemple : $a = [A,B] $b = [C,D] Comment boucler en tant que $array=array(
Depuis 2018-11-16 17:20:53
0
3
875
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！