复选框在页面刷新后不会更改其选中的值

Question

我不熟悉javascript。我只在黑暗模式下使用我在互联网上研究的信息工作。我仅以旧方式更改链接。我正在成功更改链接。但是，以任何模式刷新页面时，页面都会更改为选中的默认模式（浅色）。我很乐意提供帮助。

<link rel="stylesheet" title="light" href="site.css">
<link rel="stylesheet" title="dark" href="site-dark.css">
<script>

function switchMode() {
  var mode = document.getElementById("theme-toggle");

  if (mode.checked) {

    setActiveStyleSheet('dark');

} else {

    setActiveStyleSheet('light');

}

}

这是开关代码：

<!-- Dark & Light Mode-->
        <div class="button-con">
          <label for="theme-toggle">
            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="dayIcon" x="0px" y="0px" viewBox="0 0 35 35" style="enable-background:new 0 0 35 35;" xml:space="preserve">
              <g id="Sun">
                <g>
                  <!--icon-->
              </g>
          </g>
      </svg>
  </label>
  <input class="toggle" id="theme-toggle" type="checkbox" onclick="switchMode()">
  <label class='toggle-button' id="theme-toggle"></label>
  <label for="theme-toggle">
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="nightIcon" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
       <!-icon-->
  </svg>
</label>
</div>

Answer 1

您需要使用localSlorage或Cookie来保存当前主题。因为刷新时始终呈现页面。

https://developer.mozilla.org/ru/docs/Web/API/Window/localStorage https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies

Answer 2

然后您需要使用存储空间

设置

function switchMode() {
  var mode = document.getElementById("theme-toggle");

  if (mode.checked) {

    setActiveStyleSheet('dark');
    localStorage.setItem("ex_mode", "dark");

  } else {

    setActiveStyleSheet('light');
    localStorage.setItem("ex_mode", "light");
  }
}

加载页面时调用此选项

    window.addEventListener('load', function() {
       setActiveStyleSheet(localStorage.getItem('ex_mode') ? localStorage.getItem('ex_mode') :"light" );
       document.getElementById("theme-toggle").checked = localStorage.getItem('ex_mode')=="dark" ? true:false ;
    });

或贴上您的身体标签

<body onload="setActiveStyleSheet(localStorage.getItem('ex_mode') ? localStorage.getItem('ex_mode') :'light')">

复选框在页面刷新后不会更改其选中的值

问题描述投票：0回答：2

2个回答

最新问题

复选框在页面刷新后不会更改其选中的值

问题描述 投票：0回答：2

2个回答

最新问题

问题描述投票：0回答：2