全球主机交流论坛

标题: 求JS大哥帮个忙【继续求助】 [打印本页]
作者: 超级无敌小马甲    时间: 2021-11-11 18:05
标题: 求JS大哥帮个忙【继续求助】
本帖最后由 超级无敌小马甲 于 2021-11-12 15:31 编辑

事情是这样的，我想给站点加个白天/黑夜模式切换按钮
按钮的样式现在有了，但我不会JS，我想简单粗暴的直接调用2套css切换达到效果，已知两套css分别定义为：style.css和style_black.css所以求大哥帮个忙。
按钮样式如下：


--------------------------------

楼下有2位大佬帮忙给了答案，但第一种试了无法实现，第二种可以实现，但无法记录当下模式，返回首页又变成了默认的白天。所以只能继续求助。
作者: reizhi    时间: 2021-11-11 18:06
这挺简单的，js改class就行了
作者: 超级无敌小马甲    时间: 2021-11-11 18:07
reizhi 发表于 2021-11-11 18:06
这挺简单的，js改class就行了


奈何就是不会js，所以麻烦大哥们了
作者: G.K.D    时间: 2021-11-11 18:33
本帖最后由 G.K.D 于 2021-11-11 18:34 编辑

你把黑夜模式的 CSS 文件改一改，把所有 .xx {} 改成 html[data-theme="dark"] .xx {}
这样直接加载两个 CSS 样式文件（或者合并到一个 .css 文件中）

要切换到黑夜模式，就只需要给 html 标签添加 data-theme="dark" 属性即可
  1. document.getElementById('anniu').addEventListener('click', function () {
  2.     if (document.lastElementChild.dataset.theme) { // 如果存在该属性即当前为黑夜模式
  3.         document.lastElementChild.removeAttribute('data-theme');
  4.     } else { // 不存在该属性则添加（即切换至黑夜模式）
  5.         document.lastElementChild.setAttribute('data-theme', 'dark');
  6.     }
  7. })
复制代码
作者: 518    时间: 2021-11-11 18:41
粗略地写了一下，应该可以满足你的要求
  1. <link rel="stylesheet" href="style.css">
  2.     <link rel="stylesheet" href="style_black.css">
复制代码
  1. var black = false;
  2.     document.styleSheets[0].disabled = false
  3.     document.styleSheets[1].disabled = true
  4.     function change() {
  5.         const idx = black?1:0;
  6.         document.styleSheets[idx].disabled = true
  7.         document.styleSheets[1-idx].disabled = false
  8.         black = !black;
  9.     }
复制代码
  1. <button onclick="change()">Button</button>
复制代码
作者: 超级无敌小马甲    时间: 2021-11-12 14:27
本帖最后由 超级无敌小马甲 于 2021-11-12 14:51 编辑
G.K.D 发表于 2021-11-11 18:33
你把黑夜模式的 CSS 文件改一改，把所有 .xx {} 改成 html[data-theme="dark"] .xx {}
这样直接加载两个 CS ...


感谢大哥帮忙。这个这个对我来说有点难，我用下楼那个实现了，那个我看得懂 哈哈
------------------
那位大哥的有些许不如意，就是不会在当下记录模式，点击返回首页又变成了白天模式
作者: 超级无敌小马甲    时间: 2021-11-12 14:31
本帖最后由 超级无敌小马甲 于 2021-11-12 14:51 编辑
518 发表于 2021-11-11 18:41
粗略地写了一下，应该可以满足你的要求


感谢大佬帮忙，用上你这个实现了，非常感谢  好人一生平安，
但是有个问题，就是不会记录当前模式，点击返回后又是白天模式了
作者: 萌新酱    时间: 2021-11-12 14:37
打开，学习，https://loc.mjj8.eu.org/thread-916931-1-1.html
作者: 超级无敌小马甲    时间: 2021-11-12 14:53
萌新酱 发表于 2021-11-12 14:37
打开，学习，https://loc.mjj8.eu.org/thread-916931-1-1.html

直接好家伙，学习当看小说了
作者: 超级无敌小马甲    时间: 2021-11-12 15:31
【继续求助【继续求助
作者: 屮喵    时间: 2021-11-12 15:42
切换模式记录到cookie？
作者: 超级无敌小马甲    时间: 2021-11-12 15:45
屮喵 发表于 2021-11-12 15:42
切换模式记录到cookie？

是的  应该是这个原理吧
是不是很难
作者: G.K.D    时间: 2021-11-12 16:16
超级无敌小马甲 发表于 2021-11-12 14:27
感谢大哥帮忙。这个这个对我来说有点难，我用下楼那个实现了，那个我看得懂 哈哈
------------------
那 ...

我这种是大家常用的方案，Github、知乎 等大网站都是这样做的，你看一下他们的源代码就能发现~

当然，这种方案需要做好 CSS 样式才行，以确保可以正确覆盖常规的白天样式。

关于 Cookie 记住主题模式，我给你写了段和我前面配套的代码，既然你没有采用我的方案那就当参考一下吧：
  1. // 根据当前 Cookie 中的主题模式来设置网页主题模式
  2. setTheme(getTheme());

  4. // 获取 Cookie 中的主题模式
  5. function getTheme() {
  6.     let name = 'theme=',
  7.         ca = document.cookie.split(';');
  8.     for (let i=0; i<ca.length; i++) {
  9.         let c = ca[i].trim();
  10.         if (c.indexOf(name)==0) return c.substring(name.length,c.length);
  11.     }
  12.     // 如果不存在 theme 这个 Cookie 值，则返回为白天模式
  13.     return 'light';
  14. }

  16. // 修改 Cookie 中的主题模式
  17. function setTheme(theme) {
  18.     switch(theme) {
  19.         case 'light':
  20.             // 删除 theme 这个 Cookie，并移除 html 标签的相关属性
  21.             document.cookie='theme=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/';
  22.             document.lastElementChild.removeAttribute('data-theme');
  23.             break;
  24.         case 'dark':
  25.             // 写入 Cookie 并对 html 标签添加相关属性
  26.             document.cookie='theme=dark; expires=Thu, 18 Dec 2031 12:00:00 GMT; path=/';
  27.             document.lastElementChild.setAttribute('data-theme', 'dark');
  28.             break;
  29.     }
  30. }
复制代码
作者: 518    时间: 2021-11-12 17:02
本帖最后由 518 于 2021-11-12 17:05 编辑

参照大佬@G.K.D 写的，改了一下
  1.     function getTheme() {
  2.         let name = 'theme=',
  3.             ca = document.cookie.split(';');
  4.         for (let i = 0; i < ca.length; i++) {
  5.             let c = ca[i].trim();
  6.             if (c.indexOf(name) === 0)
  7.                 return c.substring(name.length, c.length);
  8.         }
  9.         return 'light';
  10.     }
  11.     function setTheme() {
  12.         const theme = getTheme()
  13.         switch (theme) {
  14.             case 'dark':
  15.                 document.styleSheets[0].disabled = false
  16.                 document.styleSheets[1].disabled = true
  17.                 break;
  18.             case 'light':
  19.                 document.styleSheets[0].disabled = true
  20.                 document.styleSheets[1].disabled = false
  21.                 break;
  22.         }
  23.     }
  24.     setTheme()
  25.     function change() {
  26.         const theme = getTheme()
  27.         switch (theme) {
  28.             case 'dark':
  29.                 document.cookie = 'theme=light; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/';
  30.                 break;
  31.             case 'light':
  32.                 document.cookie = 'theme=dark; expires=Thu, 18 Dec 2031 12:00:00 GMT; path=/';
  33.                 break;
  34.         }
  35.         setTheme()
  36.     }
复制代码
作者: 超级无敌小马甲    时间: 2021-11-12 17:55
G.K.D 发表于 2021-11-12 16:16
我这种是大家常用的方案，Github、知乎 等大网站都是这样做的，你看一下他们的源代码就能发现~

当然，这 ...

非常感谢大佬，我个人感觉是合并在一起的确高大上点，但奈何自己尝试过大佬给的方法，但好像不成功，实在是有愧于大佬。是我知识储备不够的问题。 再次感谢
作者: 超级无敌小马甲    时间: 2021-11-12 18:06
518 发表于 2021-11-12 17:02
参照大佬@G.K.D 写的，改了一下

啊 果然都是牛人  这一波就非常完美了  感谢2位大佬  
此贴继续供后续他人学习围观。



欢迎光临 全球主机交流论坛 (https://loc.mjj8.eu.org/) Powered by Discuz! X3.4