Checkbox JavaScript不会更改样式表

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (43)

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

为了使切换成为可能,我从以下代码中获取了代码:JS fiddleDevelopPHP并相应地合并它们以生成以下代码:

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的答案,但是我无法将这个答案与一个复选框集成。

提问于
用户回答回答于

看起来您的问题可能与您加载JavaScript文件的位置有关。一般来说,最好将script标签放在最后body; 在这里,这一点尤其重要,因为您正在将侦听器绑定到DOM对象,该对象在执行脚本时尚未创建。而且,你的脚本执行时似乎还没有加载jQuery脚本; 如果没有jQuery,您的脚本将无法运行。尝试将script标记移动到结尾body,并确保在changeCSS.js文件之前加载了jQuery 。

这是一个正确放置标签的代码的工作演示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')
  }
})

在第13行注释并取消注释index.html上面链接的REPL中的第15行,以查看此代码的演示。

扫码关注云+社区

领取腾讯云代金券