嘟嘟社区

求JS大哥帮个忙

moe

本帖最后由 超级无敌小马甲 于 2021-11-11 18:06 编辑

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

reizhi 发表于 2021-11-11 18:06
这挺简单的，js改class就行了

奈何就是不会js，所以麻烦大哥们了
本帖最后由 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. })

复制代码
粗略地写了一下，应该可以满足你的要求
  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>

复制代码