0

我试图在主体加载时加载 cookie，然后检查它的值。如果darkmode = true，那么它应该显示css/cssmain.css。如果为 false，则应显示 css/csslight.css。cookie 有效：如果我使用按钮从暗切换到亮，它会将暗模式从真（暗）更改为亮（假），反之亦然。当我刷新页面时它甚至会保留，但 css 会切换到其默认文件。

基本上，我无法弄清楚如何让 darkMode 进入我的 javascript 中的 if 语句。我尝试使用 onload="getCookie(darkMode)" 尝试将 cookie darkMode 的值（真或假）放入脚本中。似乎只是不运行脚本，因为即使我添加了警报，当我使用按钮时警报也不会弹出。

HTML：

<head>
    <title>Freshwater Fish</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="css/cssmain.css">
    <link rel="stylesheet" type="text/css" href="css/desktopview.css">
    <link rel="stylesheet" type="text/css" href="css/mobile.css">
    <link rel="stylesheet" type="text/css" href="css/slides.css">
    <link id='css_theme' rel='stylesheet' type='text/css' href='css/csslight.css'>
    <script src="js/fullstackfrog.js"></script>
</head>
<body onload="getCookie(darkMode)">

<button  class="lightmodeButton" onclick="document.getElementById('css_theme').setAttribute('href', document.getElementById('theme').value, document.cookie = 'darkMode=true'); if (document.getElementById('theme').value == 'css/cssmain.css'){  document.getElementById('theme').value = 'css/csslight.css'; document.cookie = 'darkMode=true';} else{ document.getElementById('theme').value = 'css/cssmain.css'; document.cookie = 'darkMode=false';}">Light/Dark</button>
<input type="hidden" id="theme" value="css/cssmain.css">

</body>
</html>

JS（fullstackfrog.js）：

function getCookie(name) {
  if (name) {
    document.getElementById('theme').value = 'css/cssmain.css';
  }
  else {
    document.getElementById('theme').value = 'css/csslight.css';
  }
}
4

1 回答 1

0

你知道cookies是如何工作的吗？document.cookie将保持不变。您需要编写一些东西来获取 cookie 并解析来自document.cookie. 尝试阅读https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie并使用示例。

于 2021-12-04T17:25:25.147 回答