根据 localStorage 项目值加载样式表答案

【问题标题】：Loading a stylesheet depending on the localStorage item value根据 localStorage 项目值加载样式表
【发布时间】：2019-02-07 03:57:43
【问题描述】：

我想根据 localStorage 项目值加载众多样式表之一：

<link rel="" href="assets/css/theme-dark.css" data-toggle="theme" data-theme-mode="dark">
<link rel="" href="assets/css/theme.css" data-toggle="theme" data-theme-mode="light">

<script>
  var themeMode = localStorage.getItem('themeMode');
  var themeFile = document.querySelector('[data-toggle="theme"][data-theme-mode="' + themeMode + '"]');

  themeFile.rel = 'stylesheet';
</script>

上面的代码确实有效，但是 <script></script> 标记内的代码似乎不会触发，除非所有页面内容都已加载，这意味着我首先会在应用样式表之前看到所有未设置样式的页面内容。我想要的是摆脱那种“flash”效果并立即应用正确的样式表，就像它从一开始就具有rel="stylesheet" 属性一样。

任何帮助将不胜感激。

【问题讨论】：

也许尝试使用 cookie 代替 localStorage 并在后端附加自定义样式表？
@KadirÇetintaş，很遗憾我没有后端，因为这只是一个前端演示。
因此，您需要了解的是，您的脚本是在页面加载后执行的，这就是您看到“flash”的原因。一种解决方案可能是只有一个加载步骤，等待你的 js 被执行，然后让用户看到 ui。
@leo，我只能想到隐藏body 的内容。你能提出比这更聪明的建议吗？
动态创建链接标签，见this question，（问题中的代码正确，请忽略投票最多的答案，不正确）。

标签： javascript html css

【解决方案1】：

当你实际去阅读本地存储并应用正确的样式表时，只需显示一个加载 div。

HTML。

<section hidden>
  Hello, content here!
</section>

Js.

$("document").ready(() => {
    $("section").attr('hidden', false);
});

https://jsfiddle.net/qdwv1oLh/2/

【讨论】：

我不能插手设计问题，所以我想我宁愿在加载所有内容之前opacity: 0 正文内容。

【解决方案2】：

这不是我希望的解决方案，但至少它解决了闪存问题：

<link rel="" href="assets/css/theme-dark.css" data-toggle="theme" data-theme-mode="dark">
<link rel="" href="assets/css/theme.css" data-toggle="theme" data-theme-mode="light">

<style>
  body { visibility: hidden; }
</style>

<script>
  var themeMode = localStorage.getItem('themeMode');
  var themeFile = document.querySelector('[data-toggle="theme"][data-theme-mode="' + themeMode + '"]');

  themeFile.rel = 'stylesheet';

  themeFile.addEventListener('load', function() {
    document.body.style.visibility = 'visible';
  });
</script>

【讨论】：