Question

我正在尝试创建一个可以在用户需要时切换为黑暗模式的网站。我制作了两个样式表：1. style.css和2. darkstyle.css

为了使切换成为可能，我从以下代码中提取了代码：JS fiddle和DevelopPHP，并进行了相应的合并以生成以下代码：

HTML：

<head>
<title>Home</title>
<link id="pagestyle" rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="changeCSS.js"></script>
</head>

<body>
<label for="mode"><input id="mode" type="checkbox"> Dark Mode</label>
...
</body>

JavaScript是

$('#mode').change(function(){   
if ($(this).prop('checked'))
{
    document.getElementById('pagestyle').setAttribute('href', "darkstyle.css");
}
else
{
    document.getElementById('pagestyle').setAttribute('href', "style.css");
}

});

上面的代码不起作用。

PS：我进行了很多搜索，发现了stackoverflow answer，但无法将此答案与复选框集成在一起。

Answer 1

您的问题似乎与您加载JavaScript文件的位置有关。通常，将script标记放在body的末尾是一个好习惯；在这里，这尤其重要，因为您正在将侦听器绑定到尚未创建的DOM对象，而该对象在执行脚本时就已经创建。而且，似乎您在执行脚本时甚至还没有加载jQuery脚本。没有jQuery，您的脚本将无法运行。尝试将script标记移到body的末尾，并确保已在changeCSS.js文件之前加载了jQuery。

这是您代码的working demo，其中正确放置了script标签。

但是，请注意，即使在代码的这种有效实现方式下，单击复选框与样式更改生效之间也存在很大的延迟。这是您采用的方法的固有缺陷（即加载一个全新的CSS文件）；一种性能更高的方法可能是创建一个类（例如dark），该类在单击复选框时会添加到正文中或从正文中删除。然后，在您的一个CSS文件中，您可以创建两组规则：一组规则用于处于常规“轻”状态的元素，另一组规则用于具有.dark类的元素。一个示例可能看起来像：

/* The :not(.dark) is not strictly necessary and is simply added for verbosity */
body:not(.dark) {
  background-color: white;
} 
body:not(.dark) h1 {
  color: black;
}

body.dark {
  background-color: black;
}
body.dark h1 {
  color: white
}

使用以下JavaScript：

$('#mode').change(function () {   
  if ($(this).prop('checked')) {
      $(document.body).addClass('dark')
  } else {
      $(document.body).removeClass('dark')
  }
})

注释上面链接的REPL中index.html的第13行和第15行的注释，以查看该代码的演示。

复选框JavaScript不会更改样式表

1 个答案: