这是我参与「第五届青训营 」伴学笔记创作活动的第 3 天

JS ｜ 青训营笔记

切换主题颜色

常见的切换主题颜色有:日夜主题的切换。接下来使用例子来说明:

• 版本一 :

上面代码我们获取到html中的btn按钮和body标签，当我们触发btn按钮时候，通过e.target.innerHTML获取到点击的对象html文本进行判断，如果是太阳（表示日间），那么我们把背景色换成黑色，然后字体换成白色，再把按钮切换成黑夜即可。else语句中逻辑同上。

• 版本二 ：

这里也是通过获取btn按钮，添加点击事件，if语句判断类名是日or夜，进行不同的操作，重点还是在if语句中的逻辑处理，我们通过改变body的className值，然后我们在CSS样式中定义好类名为night的样式即可。
对比：版本二比版本一优化更好，因为是通过纯改变CSS样式来达到夜间和早上的主题效果，做到了HTML/CSS/JS各司其职。

• 版本三 :

这里我们先设置input标签为不展示，并绑定一个id。然后我们写一个label标签代表日夜切换按钮，通过for属性来绑定input标签。当我们点击了label标签，由于for属性同时联动到input标签，input进行一个checked属性的切换，选中时候为夜间，我们再通过设置CSS样式即可。
对比：版本三中我们不需要使用JS代码，只通过标签自身的属性和CSS样式即可完成我们的目标。

结论：

• HTML/CSS/JS 各司其职
• 应当避免不必要由JS直接操作样式
• 可以使用class来表示状态
• 纯展示类交互寻求零JS方案