js页面怎么切换夜间模式

 时间:2026-04-21 15:43:10

1、在页面html里,我们有一个div,里面就是页面的文章内容。

js页面怎么切换夜间模式

2、默认的样式是为页面添加了一个背景色。

js页面怎么切换夜间模式

3、我们还要为页面添加一个夜间模式的样式,主要是更改背景色,文章字体颜色等。

js页面怎么切换夜间模式

4、要能切换夜间模式,我们在页面添加一个按钮,按钮添加onclick点击事件,事件函数如下,先判断页面的body是否有night这个夜间模式的样式。

js页面怎么切换夜间模式

5、如果没有这个样式,就添加night,这样就能切换到夜间模式了。

如果已经有了这个样式,就删除这个night样式,这样就是从夜间模式返回到正常模式。

js页面怎么切换夜间模式

6、运行页面,现在是正常的模式,点击下面的切换按钮。

js页面怎么切换夜间模式

7、点击后,这是切换到夜间模式的效果。

js页面怎么切换夜间模式

  • 如何用jquery给li标签加边框
  • thinkphp如何在html页面输出数据库数据
  • 如何在pycharm编辑工具中使用Django框架并调用
  • js实现得到焦点input清空,失去焦点显示默认文字
  • java如何添加背景图片的文字
  • 热门搜索
    kingdomrush攻略 牙缝太大怎么办 怎么让电脑不休眠 滨州医学院怎么样 开封美食攻略 蓝色裤子搭配上衣图 杭州千岛湖旅游攻略 香蕉减肥法 减肥食谱一周瘦10斤 生死狙击怎么加好友