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

冷不防 2022-12-31 15:23 115阅读 0赞

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

2

3

4

5

jQuery操作类样式----开关灯案例

6

7 .blank\{8 background-color: black;9 \}10

11

12

13

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

31

32

33

34

35

发表评论取消回复

表情：

评论列表（有 0 条评论，115人围观）

还没有评论，来说两句吧...

相关阅读

相关 js 实现一个开灯关灯操作

<html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title>

男娘i/ 2023年01月16日 02:43/ 0 赞/ 128 阅读

相关 jQuery修改CSS样式、jQuery修改CSS样式类，简单案例-tab栏切换

jQuery修改css样式参数只写属性名，则是返回属性值 $(this).css("color"); 参数是属性名，属性值，中间用逗号分隔，则表示设置一组样

秒速五厘米/ 2023年01月02日 11:28/ 0 赞/ 167 阅读

相关 jquery开关灯案例_jQuery----操作类样式（依托开关灯案例）

在网页开发中，元素的样式可以在style标签中定义，但是有很多案例需要添加类样式或者删除类样式，可以获取元素调用css()方法改变元素样式，但是这种方法很繁杂，本文利用开关灯案

冷不防/ 2022年12月31日 15:23/ 0 赞/ 116 阅读

相关 gsap+svg开关灯切换按钮js特效

[下载地址][Link 1] gsap+svg开关灯切换按钮特效，很有创意JavaScript开关特效。 ![1632803095.png][] dd: [Link

r囧r小猫/ 2022年09月13日 14:21/ 0 赞/ 153 阅读

相关 JavaScript开关灯投影效果

[下载地址][Link 1]JavaScript实现的开关灯投影效果，CSS3左右摇摆动画特效。 ![1631561784.png][] dd: [Link 1]: h

痛定思痛。/ 2022年09月11日 09:18/ 0 赞/ 132 阅读

相关 Jquery Ajax案例

$(function () { $.ajax({ type: "POST",//提交方法

以你之姓@/ 2022年08月02日 01:58/ 0 赞/ 123 阅读

相关关灯计划

Time Limit: 500 ms Memory Limit: 65536 KiB Special Judge Problem Description 在某次活动上，

ゝ一世哀愁。/ 2022年05月22日 12:11/ 0 赞/ 122 阅读

相关使用javascript实现开灯关灯案例

使用javascript实现开灯关灯案例 <!DOCTYPE html> <html lang="en"> <head> <met

一时失言乱红尘/ 2022年02月03日 15:07/ 0 赞/ 208 阅读

相关 30个Python物联网小实验3：使用按钮开灯关灯

使用按钮开灯关灯接线图非常简单，LED接`GPIO17`号口，按钮接`GPIO2`号口，负极接GND地线。代码也非常简单： from gpio

我就是我/ 2022年01月18日 23:27/ 0 赞/ 295 阅读

相关 jQuery实现开关灯效果案例

效果展示点击界面上的开灯关灯按钮，可以实现背景的调暗。方便晚上阅读。开灯： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naG

﹏ヽ暗。殇╰゛Y/ 2021年06月22日 15:35/ 0 赞/ 491 阅读