背景切换
1. 主要需求
- 点击按钮，实现浏览器背景的护眼模式和正常模式的切换。
- 正常模式下，按钮显示 “护眼模式”。
- 当点击后，修改 body 标签的 class 属性，切换为 night 值，按钮显示 “正常模式”。
2. 素材页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="../js/jquery-1.11.1.js"></script>
<style>
.night{
background-color: moccasin;
}
</style>
</head>
<body>
<button id="btn">护眼模式</button>
</body>
<script>
</script>
</html>
3. 代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="../js/jquery-1.11.3.js"></script>
<style>
.night{
background-color: moccasin;
}
</style>
</head>
<body>
<button id="btn" onclick="changeBody()">护眼模式</button>
</body>
<script>
function changeBody() {
$("body").toggleClass("night");
let btnText = $("#btn").text();
if(btnText=="护眼模式"){
$("#btn").text("正常模式");
}else{
$("#btn").text("护眼模式");
}
}
</script>
</html>
原文链接：https://qwert.blog.csdn.net/article/details/105453066
