Heim > Web-Frontend > js-Tutorial > Hauptteil

jq怎么恢复原来的css样式

醉折花枝作酒筹
Freigeben: 2023-01-05 16:14:17
Original
2768 Leute haben es durchsucht

在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高级教程

Das obige ist der detaillierte Inhalt vonjq怎么恢复原来的css样式. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
css
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!