时间戳

首页 > 解决方案 > 复选框 JavaScript 不会更改样式表

javascript - 复选框 JavaScript 不会更改样式表

问题描述

我正在尝试制作一个可以在用户想要时切换到暗模式的网站。我制作了 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答案，但我无法将此答案与复选框集成。

标签： javascripthtmlcss

解决方案

看起来您的问题可能与您加载 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')
  }
})

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

推荐阅读