这是我参与「第四届青训营 」笔记创作活动的的第2天
各司其职的主要思路：HTML、CSS和JavaScript职能分离。
样例：日夜模式切换
由于本人不知道表示模式的图案是怎么打出来的，于是在版本一中采用了切换图片src的方法来实现模式图案的切换。
获取图片src地址getAttribute('src')，设置图片src地址setAttribute('src', url)。通过设置图片src的方法在方案一中实现较为方便，在后两个纯css的方案中没有去实践。主要是参考课程内容缕清思路。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.title {
display: flex;
justify-content: space-between;
align-items: center;
}
body {
margin: 40px;
}
</style>
</head>
<body>
<div class="title">
<h1> 深夜食堂 </h1>
<img src="./太阳.svg" width="40" height="40" id="modeBtn">
</div>
<img src="./night.png" width="100%">
<p>
作家余华说过：
生活是属于每个人自己的感受，
不属于任何别人的看法。
人生百态，
众口难调。
如果你太在意别人的眼光，
最后受伤的只会是自己。
大千世界，有人支持你，
也一定有人诋毁你。
你的生活在自己手里，
而不在别人嘴里。
你要做的，
是把别人给的鲜花装点房间，
把别人扔的石头留做台阶。
不动声色地坚持做自己喜欢的事，
走自己喜欢的路。
</p>
</body>
</html>
版本一：通过js来设置每个需要修改元素的样式【通过js操作css】
const btn = document.getElementById('modeBtn');
btn.addEventListener('click', e => {
const body = document.body;
console.log(e.target)
if (e.target.getAttribute('src') === './太阳.svg') {
body.style.backgroundColor = 'black';
body.style.color = 'white';
e.target.setAttribute('src', './月亮.svg');
} else {
body.style.backgroundColor = 'white';
body.style.color = 'black';
e.target.setAttribute('src', './太阳.svg');
}
})
版本二：通过js来设置每个需要修改元素的类，具体的样式在night类中实现【通过js操作HTML元素】
版本三：设置伪元素【只有HTML和css】
通过input与label标签的关系<input id="modeCheckBox type="checkbox"> <label for="modeCheckBox"></label>。点击label对应的input的框就会被选中。
