jQuery----操作类样式（依托开关灯案例）-CSDN博客

在网页开发中，元素的样式可以在style标签中定义，但是有很多案例需要添加类样式或者删除类样式，可以获取元素调用css（）方法改变元素样式，但是这种方法很繁杂，本文利用开关灯案例，小结使用jquery操作类样式的方法。一共X种写法如下：

一、单一类样式的添加删除

1.$（ “元素名” ）.addClass( "类样式名称" )；

1.$（ “元素名” ）.removeClass( "类样式名称" );

二、多个类样式的添加删除（链式编程）

1.$( "元素名" ).addClass( "类样式1名称" ).addClass( "类样式2名称" ).addClass( "类样式3名称" )......addClass( "类样式n名称" )；

2.$( "元素名").removeClass( “类样式1名称” ).removeClass( "类样式2名称" ).removeClass( "类样式3名称" )......removeClass( "类样式n名称" );

三、removeClass( );

括号中什么也不写，是该元素的所有的样式

四、hasClass( "类样式名" )；

判断元素是否包含该类样式，返回值结果为bool类型

四、toggleClass( "类样式名" )；

切换该样式，即添加、删除，重复执行。

案例代码如下：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>jQuery操作类样式----开关灯案例</title>
 6         <style type="text/css">
 7             .blank{
 8                 background-color: black;
 9             }
10         </style>
11         
12         <script src="js/jquery-1.12.2.js" type="text/javascript" charset="utf-8"></script>
13         <script type="text/javascript">
14             $(function(){
15                 //获取按钮,注册点击事件
16                 $("#btn").click(function(){
17                     //判断body是否包含.blank样式
18                     if($("body").hasClass("blank")){
19                         //包含------开灯,移除类样式
20                         $(this).val("关灯");
21                         $("body").removeClass("blank");
22                         
23                     }else{
24                         //不包含----关灯,添加类样式
25                         $(this).val("开灯");
26                         $("body").addClass("blank");
27                     }
28                 });
29             });
30         </script>
31     </head>
32     <body>
33         <input type="button" id="btn" value="关灯" />
34     </body>
35 </html>