求JS大哥帮个忙【继续求助】

[复制链接]
查看: 6454   回复: 11
发表于 2022-6-6 17:50:51 | 显示全部楼层 |阅读模式
事情是这样的,我想给站点加个白天/黑夜模式切换按钮
按钮的样式现在有了,但我不会JS,我想简单粗暴的直接调用2套css切换达到效果,已知两套css分别定义为:style.css和style_black.css所以求大哥帮个忙。
按钮样式如下:


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

楼下有2位大佬帮忙给了答案,但第一种试了无法实现,第二种可以实现,但无法记录当下模式,返回首页又变成了默认的白天。所以只能继续求助。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
回复

使用道具 举报

发表于 2022-6-6 17:51:48 | 显示全部楼层
我这种是大家常用的方案,Github、知乎 等大网站都是这样做的,你看一下他们的源代码就能发现~

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

关于 Cookie 记住主题模式,我给你写了段和我前面配套的代码,既然你没有采用我的方案那就当参考一下吧:
  1. // 根据当前 Cookie 中的主题模式来设置网页主题模式setTheme(getTheme());// 获取 Cookie 中的主题模式function getTheme() {    let name = 'theme=',        ca = document.cookie.split(';');    for (let i=0; i<ca.length; i++) {        let c = ca[i].trim();        if (c.indexOf(name)==0) return c.substring(name.length,c.length);    }    // 如果不存在 theme 这个 Cookie 值,则返回为白天模式    return 'light';}// 修改 Cookie 中的主题模式function setTheme(theme) {    switch(theme) {        case 'light':            // 删除 theme 这个 Cookie,并移除 html 标签的相关属性            document.cookie='theme=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/';            document.lastElementChild.removeAttribute('data-theme');            break;        case 'dark':            // 写入 Cookie 并对 html 标签添加相关属性            document.cookie='theme=dark; expires=Thu, 18 Dec 2031 12:00:00 GMT; path=/';            document.lastElementChild.setAttribute('data-theme', 'dark');            break;    }}
复制代码
回复 支持 反对

使用道具 举报

发表于 2022-6-6 17:52:07 | 显示全部楼层
粗略地写了一下,应该可以满足你的要求
  1. <link rel="stylesheet" href="style.css">    <link rel="stylesheet" href="style_black.css">
复制代码
  1. var black = false;    document.styleSheets[0].disabled = false    document.styleSheets[1].disabled = true    function change() {        const idx = black?1:0;        document.styleSheets[idx].disabled = true        document.styleSheets[1-idx].disabled = false        black = !black;    }
复制代码
  1. <button onclick="change()">Button</button>
复制代码
回复 支持 反对

使用道具 举报

发表于 2022-6-6 17:52:44 | 显示全部楼层
参照大佬@G.K.D 写的,改了一下
  1.     function getTheme() {        let name = 'theme=',            ca = document.cookie.split(';');        for (let i = 0; i < ca.length; i++) {            let c = ca[i].trim();            if (c.indexOf(name) === 0)                return c.substring(name.length, c.length);        }        return 'light';    }    function setTheme() {        const theme = getTheme()        switch (theme) {            case 'dark':                document.styleSheets[0].disabled = false                document.styleSheets[1].disabled = true                break;            case 'light':                document.styleSheets[0].disabled = true                document.styleSheets[1].disabled = false                break;        }    }    setTheme()    function change() {        const theme = getTheme()        switch (theme) {            case 'dark':                document.cookie = 'theme=light; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/';                break;            case 'light':                document.cookie = 'theme=dark; expires=Thu, 18 Dec 2031 12:00:00 GMT; path=/';                break;        }        setTheme()    }
复制代码
回复 支持 反对

使用道具 举报

发表于 2022-6-6 17:53:12 | 显示全部楼层
这挺简单的,js改class就行了
回复 支持 反对

使用道具 举报

发表于 2022-6-6 17:53:21 | 显示全部楼层
奈何就是不会js,所以麻烦大哥们了
回复 支持 反对

使用道具 举报

发表于 2022-6-6 17:53:53 | 显示全部楼层
你把黑夜模式的 CSS 文件改一改,把所有 .xx {} 改成 html[data-theme="dark"] .xx {}
这样直接加载两个 CSS 样式文件(或者合并到一个 .css 文件中)

要切换到黑夜模式,就只需要给 html 标签添加 data-theme="dark" 属性即可
  1. document.getElementById('anniu').addEventListener('click', function () {    if (document.lastElementChild.dataset.theme) { // 如果存在该属性即当前为黑夜模式        document.lastElementChild.removeAttribute('data-theme');    } else { // 不存在该属性则添加(即切换至黑夜模式)        document.lastElementChild.setAttribute('data-theme', 'dark');    }})
复制代码
回复 支持 反对

使用道具 举报

发表于 2022-6-6 17:54:41 | 显示全部楼层
感谢大哥帮忙。这个这个对我来说有点难,我用下楼那个实现了,那个我看得懂 哈哈
------------------
那位大哥的有些许不如意,就是不会在当下记录模式,点击返回首页又变成了白天模式
回复 支持 反对

使用道具 举报

发表于 2022-6-6 17:55:37 | 显示全部楼层
感谢大佬帮忙,用上你这个实现了,非常感谢  好人一生平安,
但是有个问题,就是不会记录当前模式,点击返回后又是白天模式了
回复 支持 反对

使用道具 举报

发表于 2022-6-6 17:56:18 | 显示全部楼层
打开,学习,https://hostloc.com/thread-916931-1-1.html
回复 支持 反对

使用道具 举报

发表于 2022-6-6 17:57:16 | 显示全部楼层
直接好家伙,学习当看小说了
回复 支持 反对

使用道具 举报

发表于 2022-6-6 17:57:53 | 显示全部楼层
【继续求助【继续求助
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则