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

冷不防 2022-12-31 15:23 170阅读 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 条评论，170人围观）

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

相关阅读

相关开关灯（网页版）

开关灯 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF

客官°小女子只卖身不卖艺/ 2023年10月03日 15:21/ 0 赞/ 19 阅读

相关 B2092 开关灯【入门】

原题链接: [开关灯][Link 1] 开关灯题目描述假设有 N N N 盏灯（ N N N 为不大于 5000 5000 5000 的正整数），从 1

浅浅的花香味﹌/ 2023年09月25日 17:19/ 0 赞/ 15 阅读

相关 js实现开关灯游戏

需求：点击三个按钮，页面出现不同数量的“灯” 所有的灯有相同的点击效果。点击一个灯的时候，this和他的上下左右都会变成另一种背景色。代码在这里~~~ [https

冷不防/ 2023年06月05日 08:10/ 0 赞/ 23 阅读

相关前端实例4——开关灯效果（DOM，jQuery）

效果图 ![开][20200725103504690.png] ![关][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_te

╰+哭是因爲堅強的太久メ/ 2023年03月01日 12:21/ 0 赞/ 5 阅读

相关开关灯案例

效果图： ![在这里插入图片描述][20200613113612416.gif] 源代码 <!DOCTYPE html> <html lang="en">

女爷i/ 2023年02月17日 08:56/ 0 赞/ 57 阅读

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

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

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

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

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

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

相关 JavaScript开关灯投影效果

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

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

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

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

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

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

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

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