我正在尝试制作一个可以在用户需要时切换到暗模式的网站。我制作了 2 个样式表 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但我无法将此答案与复选框结合起来。
最佳答案
看来您的问题可能与您加载 JavaScript 文件的位置有关。通常，将 script 标记放在 body 的末尾是一种很好的做法；在这里，这一点尤其重要，因为您将监听器绑定(bind)到 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 - 复选框 JavaScript 不会更改样式表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51619771/