Question

我目前正在使用我使用以下教程制作的设计，在我的网站上同时拥有黑/白背景：

虽然本教程有点完成工作（对改变html / css的部分非常敏感），但我真的在寻找更优雅的实现。有没有办法使用jquery或javascript创建一个切换开关，允许更改整个网站的背景颜色？

我刚刚在一周前把网络编程作为一种爱好，所以我现在对javascript和jquery知之甚少。

编辑：我有一个静态网站，我不太关心性能，因为只有99.9％的人在看这个网站的时候会是我。

Answer 1

在javascript中写这个

var i=1;
function myFun()
{
if(i%2==0)
    document.body.style.backgroundColor="black";
else
    document.body.style.backgroundColor="white";

i++;
}

点击

<button onclick="myFun()">Click me</button>

我希望你能得到你的答案。：）

Answer 2

您可以创建一个单独的css文件，其中包含为页面中所有必需元素定义的样式，然后根据按钮单击或者无线电选择动态地将css添加到页面中，如下所示。

$('head').append('<link rel="stylesheet" href="style1.css" type="text/css" />');

和

$('head').append('<link rel="stylesheet" href="style2.css" type="text/css" />');

这是一个很好的教程，它解释了它

Answer 3

使用您喜欢的任何内容对您的网站进行编码作为默认配色方案。然后，为主题子类下的备用颜色方案创建css。例如：

p,h1 {color:red;]
.blue-theme p,h1 {color:blue;}

然后只需使用javascript或服务器端变量将“blue-theme”类添加到body或root元素标记中。如果您应用css转换，这也可以轻松地在主题之间进行转换！

就负载大小而言，它不是最有效的，因为你的CSS文件会稍微大一点，并且性能不是最佳的，因为添加主题会花费处理时间，但对于一般用途我相信这是实现这一目标的最佳方式

Answer 4

jQuery非常适合帮助初学者向网站添加此类功能。首先，设置类似于此的CSS：

body {
    background-color: #fff;
}

body.dark {
    background-color: #000;
}

这会将默认css设置为白色，然后使用JavaScript，您将通过引用按钮id属性来更改类（以及生成的颜色），为您添加“单击处理程序”按钮：

$('#yourButtonID').click(function() {
    $('body').toggleClass('dark');
});

在页面上执行上述代码之前，您需要确保在标记中包含jQuery的副本。

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.js"></script>

将jQuery用于这个单一的应用程序可能有点过分，但它是最简单的方法，可以在没有经验的情况下完成您想要的任务，而且如果您深入了解它，您可以做更多的库。祝你好运！

Answer 5

我不打算给你准确的代码，但肯定会查看javascript的一些更新功能并实现css。也许加载不同的CSS文件作为您网站的颜色主题。