程序员经验分享-hwhale

使用 javascript 和 localStorage 加载样式表

2024-02-06

我正在使用 Jekyll 网站，这并不重要，因为这是一个静态页面，我只是将其编写为附加信息。

期望的行为：

我想通过 javascript 加载我的样式表，因此它可以依赖于本地存储的值，比方说dark and light.

我用下面的代码做了一个通过 JS 加载它的小测试（有效）。

GREEN

<head>
  ...
  <link rel="stylesheet" href="/assets/css/{{'light'}}.css">
  ...
</head>

这将按预期加载名为“light”的 CSS 文件。

但现在我想依靠localStorage，有一个变量theme具有light作为价值。我尝试了以下方法：

RED

<head>
  ...
  <script>
    var storedTheme = window.localStorage.getItem('theme'); //Tested and working in console
    theme = storedTheme ? storedTheme : 'light'; //global variable (also readable in console)
  </script>

  <link rel="stylesheet" href="/assets/css/{{theme}}.css"> <!-- cant read global variable -->
  ...
</head>

使用全局变量不起作用，它给我一个 404 错误，因为样式表路径是/assets/css/.css.

之后，我认为创建一个元素也许可以解决问题，我手动创建了一个元素来测试它：

RED

<head>
...
<p id="theme" style="display:none;">dark</p>

<link rel="stylesheet" href="/assets/css/{{document.getElementById('theme').innerHTML}}.css">
...
</head>

不，路径仍然显示为：/assets/css/.css


如果您更改了样式<body>你得到 FOUC (Flash Of Unstyled C内容）。尝试使用类似的近似等效项<main>并将其展开 100% x 100% 并<html> and <body>以及，但给他们margin and padding为 0 以确保<main>完全覆盖它们。

The [disabled]属性为<link>是切换它们的最佳方式，因为它们仍然加载但处于惰性状态。另外，在示例中还有一个名为的函数loadTheme(e)这是加载在'DOMContentLoaded'确保预先加载所有 DOM 的事件。下面的示例将不起作用，因为localStorage在 SO 上被阻止。有一个功能示例Plunker https://plnkr.co/edit/rxZonjfs2Ttfr32H?open=lib%2Fscript.js。要测试它：

  1. Click the green Preview button.
  2. Another frame should appear on the right. Within the frame is the webpage example click the ☀️ button.
  3. It should be in dark mode now. Next, click the refresh ⟳ button located in the mini-toolbar within the frame or press ctrl+enter for Windows OS or ⌥+return for Mac OS.
  4. 页面应仍处于深色模式。 ????
/* night.css 
main {
  background: #000;
  color: #fff;
}
*/

/* default.css */
:root {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  font: 1ch/1.5 'Segoe UI';
}

body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  font-size: 4ch;
}

main {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: #000;
}

form {
  width: 80vw;
  margin: 20px auto;
}

fieldset {
  width: max-content;
  min-height: 25px;
  margin-left: auto;
  padding: 0 1.5px 1.5px;
  border-radius: 8px;
  background: inherit;
  color: inherit;
}

button {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  font-size: 4rem;
  text-align: center;
  background: transparent;
  cursor: pointer;
}

#theme::before {
  content: '☀️';
}

.night #theme::before {
  content: '????';
}
<!DOCTYPE html>
<html>

<head>
  <meta charset='utf-8'>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href='lib/default.css' rel='stylesheet'>
  <link class='night' href='lib/night.css' rel='stylesheet' disabled>
  <style></style>
</head>

<body>
  <main>
    <form id='UI'>
      <fieldset name='box'>
        <legend>Theme</legend>
        <button id='theme' type='button'></button>
      </fieldset>
      <p>Click the "Theme" switch to toggle between `disabled` `true` and `false` on `night.css` and `light.css` `
        <link>`s.</p>
    </form>
  </main>
  <script>
    const UI = document.forms.UI;
    const M = document.querySelector('main');
    const L = document.querySelector('.night')

    const switchTheme = e => {
      const clk = e.target;
      if (clk.matches('button')) {
        M.classList.toggle('night');
        L.toggleAttribute('disabled');
      }
      let status = M.className === 'night' ? 'on' : 'off';
      localStorage.setItem('theme', status);
    };

    const loadTheme = e => {
      let cfg = localStorage.getItem('theme');
      if (cfg === 'on') {
        M.classList.add('night');
        L.removeAttribute('disabled');
      } else {
        M.classList.remove('night');
        L.setAttribute('disabled', true);
      }
    };

    UI.addEventListener('click', switchTheme);
    document.addEventListener('DOMContentLoaded', loadTheme);
  </script>
</body>

</html>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

html

使用 javascript 和 localStorage 加载样式表 的相关文章

随机推荐

  • Angular 4 + zonejs：路由在未捕获的错误后停止工作

    如果在路由期间组件 构造函数或 ngOnInit 出现未捕获的错误 则导航将不再起作用 即使有一个全局 ErrorHandler 和一个用于 RouterModule 的 ErrorHandler 也会发生这种情况 也添加了一个 ZoneL

  • 如何在 ITRS Geneos 中监控 MQ

    谁能举例说明如何在 ITRS 中设置如何使用 mq queue 插件监控 MQ 队列 我下面有两张它正在寻找的屏幕截图 我不确定这将如何帮助我们确定队列中卡住了多少消息 高级 选项卡下的设置告诉插件如何连接到 IBM MQ 队列管理器 如何

  • 是否可以让“dput”返回在封闭环境之外运行的源代码？

    假设我有一个闭包add y y 它返回一个函数 该函数添加y到它的输入 add y lt function y function x x y add 4 lt add y 4 所以价值add 4是一个将 4 添加到其输入的函数 这有效 我想

  • KMP算法与Z算法的关系

    KMP and Z算法是众所周知的字符串搜索算法 KMP算法通过 KMP 失效函数寻找模式 该函数定义为 pat是搜索模式 lps i pat 0 i 的最长真前缀 也是 pat 0 i 的后缀 e g for string abcab 这

  • 如何使用C#通过P6 Web服务读写P6DB中的数据

    我想在 P6 Web 服务中使用基于 Cookie 的身份验证 我点击了以下两个链接 http docs oracle com cd E16281 01 Technical Documentation Web Services Progra

  • 最多不能超过 50%。矩阵乘法的理论性能

    Problem 我正在学习 HPC 和代码优化 我尝试复制 Goto 的开创性矩阵乘法论文中的结果 http www cs utexas edu users pingali CS378 2008sp papers gotoPaper pdf

  • 基于边界的三角形未按预期渲染

    我试图用 4 个旋转的三角形制作一个完整的正方形 但是当我放置它们时 它们之间有一个很薄的空间 更奇怪的是 当我旋转整个东西时 线条在 Chrome 中消失 但在 Firefox 中出现在三角形的中间 再次形成 X jsFiddle htt

  • 如何使用 JQuery 发送按键触发器

    我如何发送特定按键代码的触发按键 例如 以编程方式使用 JQuery 的 TextBox 上的 9 事件 这就是我打算做的 以编程方式向文本框输入值 然后以编程方式触发文本框上的 Tab 键以退出该字段 my code tags1 val

  • 即使安装了 mtl，也找不到模块“Control.Monad.State”

    当我尝试加载包含的模块时import Control Monad State I got Could not find module Control Monad State Perhaps you meant Control Monad S

  • 语义分割中的上采样

    我正在尝试实现一篇关于语义分割的论文 但我对如何对分割网络生成的预测图进行上采样以匹配输入图像大小感到困惑 例如 我使用 Resnet101 的变体作为分割网络 如本文所使用 通过这种网络结构 大小为 321x321 的输入 论文中再次使用

  • Log4net - 如何知道文件何时滚动？

    我有一个由 log4net 创建的日志文件 该文件每小时都会更改 有没有办法知道这个滚动何时发生 就像 log4net 库中的一个事件一样 我可以绑定到该事件 并在触发该事件时执行操作 我不是在寻找代码示例 只是想知道此事件是否存在 以及在

  • 当按下引号键时，java.awt.Robot.keyPress 抛出 IllegalArgumentException

    当您尝试使用 Robot keyPress 键入 双引号 它抛出 java lang IllegalArgumentException Invalid key code 我该如何解决或解决这个问题 如果有帮助的话 我目前使用的是 Windo

  • 在 .htaccess 重定向中保留 HTTP/HTTPS 协议

    我必须在 htaccess 中将端口 80 重定向到 2368 但我想保持请求的协议完整 以便 SSL 不会中断 我目前有这个 RewriteCond HTTP HOST sub domain com NC RewriteRule http

  • 如何向 fpdf 添加新字体？

    如何将 Gotham book 字体添加到 fpdf 中 大多数解释都不清楚并且很难理解 我需要一个例子 请问有人可以帮忙吗 没关系 得到了我的答案 Go to http www fpdf org makefont http www fpd

  • ASP.Net MVC3 Azure - 我需要会员提供程序存储过程吗？

    我正在使用 Azure 作为数据库存储来创建我的第一个 ASP Net MVC3 应用程序 有很多很棒的教程 但我目前正在使用这个 演练 在 Windows Azure 上托管 ASP NET Web 应用程序 http msdn micr

  • 如何在 Spring 中以编程方式获取当前活动/默认环境配置文件？

    我需要根据不同的当前环境配置文件编写不同的逻辑 如何从 Spring 获取当前活动的和默认的配置文件 您可以自动连接Environment https docs spring io spring framework docs current

  • 向面板添加鼠标单击事件

    我想分配mouseclick事件至asp net panel protected void Page Load object sender EventArgs e Panel p new Panel p Click new EventHan

  • Protege 中复杂类的推理

    我想做出这样的推论 比如图中灰色虚线代表的属性 我断言了一个普遍的公理 hasTaste some Bitter SubClassOf goesWellWith some hasTaste some Sweet 其中 bitter 是 Bi

  • new Date() 在 Chrome 和 Firefox 中的工作方式不同

    我想将日期字符串转换为Date通过 javascript 使用以下代码 var date new Date 2013 02 27T17 00 00 alert date 2013 02 27T17 00 00 是来自服务器的 JSON 对象

  • 使用 javascript 和 localStorage 加载样式表

    我正在使用 Jekyll 网站 这并不重要 因为这是一个静态页面 我只是将其编写为附加信息 期望的行为 我想通过 javascript 加载我的样式表 因此它可以依赖于本地存储的值 比方说dark and light 我用下面的代码做了一个

热门标签