在网页开发中，元素的样式可以在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>