Html 使用jQuery向localStorage添加暗模式样式表

因此，我一开始就知道，为darkmode使用单独的样式表已经是一种很奇怪的方式，但我的情况如下：

我有一个输入触发器，当.prop（“checked”，true）在styles.css上切换darkmode.css，而当.prop（“checked”，false）删除该触发器时，您只需要使用标准的“light mode”样式

我想实现的是，如果在主页上点击.prop（“checked”，true），然后点击另一个页面，例如“About Us”，我想保持该.prop（“checked”，true），并保持黑暗模式

$（“#暗模式切换”）。单击（函数（）{
if（$（“#暗模式切换”）.prop（“选中”，true））{
$（“”）.attr（{'rel'：'stylesheet'，'href'：'styles/darkmode.css'}）.appendTo（'body'）；
}else if（$（“#暗模式切换”）.prop（“选中”，false））{
$（“”）.attr（{'rel'：'stylesheet'，'href'：'styles/styles.css'}）.appendTo（'body'）；
$（“”）.attr（{'rel'：'stylesheet'，'href'：'styles/about.styles.css'））.appendTo（'body'）；
$（“”）.attr（{'rel'：'stylesheet'，'href'：'styles/operations.styles.css'}）.appendTo（'body'）；
}});

一个好方法是使用获取和设置项目。然后，您可以检查该值的基本用法是否为true/false

jQuery不需要什么。 另外，使用

prop（“checked”，true）

设置值。即使它在

if

语句中。 因此，您需要做的就是通过

prop（“checked”）

获取布尔值，这将返回false或true

或者在jQuery 1.6之前，类似于：

.attr（'checked'，'checked'）

暗模式？
var darkModeToggle=$（“#darkModeToggle”）；
$（函数（$）{
如果（！localStorage.getItem（'darkmode'））{
console.log（'第一次访问时设置暗模式'）
setItem（'darkmode'，false）
}
})
darkModeToggle.单击（函数（）{
if（darkModeToggle.prop（“选中”））{
setItem（'darkmode'，true）；
$（“”）.attr（{'rel'：'stylesheet'，'href'：'styles/darkmode.css'}）.appendTo（'body'）；
}否则如果（！darkModeToggle.prop（“选中”））{
setItem（'darkmode'，false）；
$（“”）.attr（{'rel'：'stylesheet'，'href'：'styles/styles.css'}）.appendTo（'body'）；
$（“”）.attr（{'rel'：'stylesheet'，'href'：'styles/about.styles.css'））.appendTo（'body'）；
$（“”）.attr（{'rel'：'stylesheet'，'href'：'styles/operations.styles.css'}）.appendTo（'body'）；
}
});

您可以通过更换href来切换！！没有附加它！！

$("#darkmodeToggle").click(function() {
  if ($("#darkmodeToggle").prop("checked", true)) {
    $("<link>").attr({'rel': 'stylesheet', 'href': 'styles/darkmode.css'}).appendTo('body');
  } else if ($("#darkmodeToggle").prop("checked", false)) {
    $("<link>").attr({'rel': 'stylesheet', 'href': 'styles/styles.css'}).appendTo('body');
    $("<link>").attr({'rel': 'stylesheet', 'href': 'styles/about.styles.css'}).appendTo('body');
    $("<link>").attr({'rel': 'stylesheet', 'href': 'styles/operations.styles.css'}).appendTo('body');
  }});

<label>Dark mode?
  <input type="checkbox" id="darkmodeToggle" class="darkmode"/>
</label>

var darkModeToggle = $("#darkmodeToggle");

$(function($) {
    if(!localStorage.getItem('darkmode')) {
    console.log('Setting darkmode on first visit')
        localStorage.setItem('darkmode', false)
  }
})

darkModeToggle.click(function() {
  
  if (darkModeToggle.prop("checked")) {
    localStorage.setItem('darkmode', true);
    
    $("<link>").attr({'rel': 'stylesheet', 'href': 'styles/darkmode.css'}).appendTo('body');
  } else if (!darkModeToggle.prop("checked")) {
    localStorage.setItem('darkmode', false);
    
    $("<link>").attr({'rel': 'stylesheet', 'href': 'styles/styles.css'}).appendTo('body');
    $("<link>").attr({'rel': 'stylesheet', 'href': 'styles/about.styles.css'}).appendTo('body');
    $("<link>").attr({'rel': 'stylesheet', 'href': 'styles/operations.styles.css'}).appendTo('body');
  }
  });