这是我参与「第五届青训营 」笔记创作活动的第3天
前言
这次参加字节跳动青训营的活动，竟然见到了传说中的月影老师
深色模式
版本一
- 获取切换按钮元素
- 给按钮绑定鼠标点击事件
- 获取页面body元素
- 判断当前元素内容是🌞还是🌜
- 是🌞就把页面背景色改成黑色，字体颜色改成白色，并将按钮元素改成🌜
- 否则把页面背景颜色改成白色，字体颜色改成黑色，按钮元素改成🌞
这种实现方式虽然洛基清晰，但是不符合各司其职的原则
这样JavaScript代码既修改了页面元素又修改了页面结构。
版本二
点击按钮是，设置页面body元素的class属性，切换夜间模式时，即设置body的class属性为night。
我们只需要造body.night{}上描述夜间模式的颜色方案即可。
这种方案即描述了页面的状态(深色模式)，又提高了代码的可读性，在修改颜色是我们只需要修改body.nignht{}的样式即可即可
版本三
俗话说得好，最好的js就是不使用js。
使用伪类选择器来选择元素，利用checkbox可以记住状态的特性，记录用户的状态，即勾选和不勾选两个状态，对应日间模式和夜间模式，即深色模式。
将checkbox通过display:none隐藏起来,通过checkbox的为类选择器checked切换，点击就会触发这个伪类
+介于两个选择器之间，当第二个元素紧跟第一个元素，且这两个元素是同一个父元素的子元素是，则第二个元素将被选中。
结论
- HTML、CSS、JavaScript各司其职
- 避免JavaScript操作时应当尽量避免
- 用class来表示状态
