WWW.lllT.neT
更换方式:1、用removeClass()方式移除旧的类款式,addClass()方式加上新的类款式就可以;2、用attr()方式改动class属性,立即更换为新的class类就可以,英语的语法“$(原素).attr("class","新类名")”。
本实例教程实际操作自然环境:windows7系统软件、jquery1.10.2版本号、Dell G3电脑上。
jquery更换类款式
方式1:应用removeClass()和addClass()方式
应用removeClass()方式移除旧的类款式,应用addClass()方式加上新的类款式
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="js/jquery-1.10.2.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $("p").removeClass("old-class").addClass("new-class") ; }); }); </script> <style type="text/css"> .old-class{ border: 1px solid red; background-color: #FFC0CB; } .new-class{ border: 2px solid green; background-color: #55aa7f; color: white; } </style> </head> <body> <p class="old-class">hello,检测文本</p> <button>更换类款式</button> </body> </html>
方式2:应用attr()
应用attr()方式改动class属性,立即更换为新的class类
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="js/jquery-1.10.2.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $("p").attr("class","new-class"); }); }); </script> <style type="text/css"> .old-class{ border: 1px solid red; background-color: #FFC0CB; } .new-class{ border: 2px solid green; background-color: #55aa7f; color: white; } </style> </head> <body> <p class="old-class">hello,检测文本</p> <button>更换类款式</button> </body> </html>
有关教程视频建议:jQuery实例教程(短视频)
以上便是jquery如何更换类款式的详尽具体内容,大量请关心自学java网其他相关文章!
WWW.lllT.neT声明:有的资源来自网络转载,版权归原作者所有,如有侵犯到您的权益请联系邮箱:our333@126.com我们将配合处理!
原文地址:jquery如何更换类款式发布于2021-12-11 15:36:03