Checkbox JavaScript不更改样式表
我试图使一个网站，可以切换到黑暗模式时，用户想要的。我做了两个样式表: 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，但我不能将这个答案与复选框集成在一起。
回答 1
Stack Overflow用户
发布于 2018-08-01 02:55:13
看起来您的问题可能与您加载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行，查看此代码的演示。
https://stackoverflow.com/questions/51619771
复制相似问题