jQuery----操作类样式（依托开关灯案例）
程序员文章站
2023-08-19 14:15:30
在网页开发中，元素的样式可以在style标签中定义，但是有很多案例需要添加类样式或者删除类样式，可以获取元素调用css（）方法改变元素样式，但是这种方法很繁杂，本文利用开关灯案例，小结使用jquery操作类样式的方法。一共X种写法如下： 一、单一类样式的添加删除 1.$（ “元素名” ）.addCl ......
在网页开发中，元素的样式可以在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>