jquery开关灯案例_JQuery 学习笔记（2）

最新推荐文章于 2022-06-08 09:33:11 发布

罗兹

最新推荐文章于 2022-06-08 09:33:11 发布

阅读量266

点赞数

文章标签： jquery开关灯案例

本文链接：https://blog.csdn.net/weixin_36006862/article/details/112518499

版权

这是一个关于使用 JQuery 实现操作类样式以及网页开关灯效果的学习笔记。通过添加、移除和切换类样式，改变元素的背景颜色和边框，实现了按钮点击改变 div 的外观。同时，通过给 body 添加或移除特定类样式，实现网页背景的开灯和关灯效果。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>操作类样式</title>
<style>
div{
width: 200px;
height: 100px;
background-color: orange;
}
.cls{
background-color: #ddaaff;
}
.cls2{
border: 5px solid rgb(87, 255, 247);
}
</style>
<script src="js/jquery-1.12.2.js"></script>
<script>
$(function(){
//获取按钮，点击按钮，为div 添加一个类样式
$("#bth").click(function(){
//$("#dv").addClass("cls");//在addClass方法中类样式的名字前面没有点（.）
//$("#dv").addClass("cls").addClass("cls2");
//另一种写法，addClass添加样式的时候，多个类样式的名字中间用空格隔开
$("#dv").addClass("cls cls2");
});
$("#bth2").click(function(){
//移除一个元素的类样式
//$("#dv").removeClass("cls");
//移除div的多有类样式，removeClass方法中什么也不写移除的是当前元素的所有类样式
$("#dv").removeClass();
});
});
</script>
</head>
<body>
<input type="button" value="显示效果" id="bth">
<input type="button" value="移除类样式" id="bth2">
<div id="dv"></div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 200px;<

最低0.47元/天解锁文章

罗兹

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫