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

程序员文章站 2022-05-30 14:58:02

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

上一篇： ChainUP衍生品品牌EXUP段海龙：比特币减半的利好

下一篇：论：阿里妈妈“包养”中小站长