jQuery替换类样式怎样完成？教你两种方法
发布时间：2022-02-08 15:12:46 所属栏目：语言 来源：互联网
导读：这篇文章我们来了解jQuery中实现替换类样式的方法，这里介绍两种方法，分别是addClass()方法和attr()方法，具体怎样实现呢？下文代码介绍的很详细，有需要的朋友可以参考，接下来就跟随小编来一起学习一下吧！ 本教程操作环境：windows7系统、jquery1.10.2版
|
这篇文章我们来了解jQuery中实现替换类样式的方法，这里介绍两种方法，分别是addClass()方法和attr()方法，具体怎样实现呢？下文代码介绍的很详细，有需要的朋友可以参考，接下来就跟随小编来一起学习一下吧！ 本教程操作环境：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>  （编辑：桂林站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
