使用 JavaScript 切换 CSS 主题答案

【问题标题】：Switch CSS theming with JavaScript使用 JavaScript 切换 CSS 主题
【发布时间】：2016-11-10 06:37:48
【问题描述】：

我有一个带有两个按钮的 HTML 页面：一个浅色主题按钮和一个深色主题按钮。当我单击浅色主题按钮时，背景将变为浅灰色，文本为黑色，当我单击深色主题按钮时，背景将变为黑色，文本为白色。

当我重新打开页面时，应该会生成最后选择的主题。

这是我的html：

<html>
    <head>
        <script type="text/javascript" src="js/index.js"></script>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="css/index.css">
    </head>

    <div class="MyPage">
        <body>
            <h1>choose a theme:</h1>
            <input id="b1" type="button" value="light theme">
            <input id="b2" type="button" value="darck theme">
            <p>this a sample for using API local storage in HTML5 </p>        
        </body>
    </div>
</html>

css:

.MyLightPage 
{
    background-color: gray;
    text-decoration-color: black;
}
.MyDarkPage
{
    background-color: black;
    color: white;  
}

我的问题是如何连接我的项目的 3 种不同类型（HTML、CSS 和 JavaScript）以及我的 JavaScript 文件中应该存在哪些函数来实现这一点。

【问题讨论】：

如果你想保持与上次访问相同的主题，你需要在服务器的某个地方存储一个变量，也许在数据库中。您可以在客户端计算机上设置 cookie 或将设置与特定登录相关联。
html 5中有本地存储，不需要使用数据库
@Biffen 你已经有足够长的时间知道如何通过改善而不是抱怨来提供帮助
@LGSon 我做了尝试，但什么都想不出来，也许我不是很有动力，因为这不是我的工作。此外，我认为指出这一点是有道理的：也许 OP 会从中学到一些东西。

标签： javascript css html

【解决方案1】：

这可以使用 JavaScript 轻松完成。这些按钮在设置背景和文本颜色时调用不同的函数。

#MyPage {
        background-color: black;
        color: white;  
}

<div id="MyPage">
     <h1>choose a theme:</h1>
     <input id="b1" onclick="lightTheme()" type="button" value="light theme">
     <input id="b2" onclick="darkTheme()" type="button" value="dark theme">
     <p>this a sample for using API local storage in HTML5 </p>  
     <script>
     	  function darkTheme() {
            document.getElementById('MyPage').style.backgroundColor = "black";
            document.getElementById('MyPage').style.color = "white";
          }

          function lightTheme() {
            document.getElementById('MyPage').style.backgroundColor = "white";
            document.getElementById('MyPage').style.color = "black";
          }
     </script>
</div>

【讨论】：

【解决方案2】：

这个 sn-p 展示了如何在单击按钮时设置相关的 CSS 类。保存选择主题可以很方便的添加到 JS 部分 - 详情请参考非常简单的Localstorage API。

$('#b1').click(function() {
  $('body').attr("class","MyLightPage");
});
$('#b2').click(function() {
  $('body').attr("class","MyDarkPage");
});

.MyLightPage 
  {
     background-color: gray;
     text-decoration-color: black;

   }
 .MyDarkPage
     {
        background-color: black;
        color: white;  
     }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
 <div class="MyPage">

       <h1>choose a theme:</h1>
        <input id="b1" type="button" value="light theme">
        <input id="b2" type="button" value="dark theme">
        <p>this a sample for using API local storage in HTML5 </p>        
 </div>
</body>

作为旁注，还请查看基本 HTML 文档的结构。 body 标签不应该是任何divs 的子标签，它必须是html 标签的直接子标签。

【讨论】：

它在我的项目中不起作用所以你能告诉我我做错了什么！这是我的 html 头：
您必须更具体一点 - 请使用您拥有的代码和您面临的具体问题更新您的问题。
你能解释一下吗，因为我不知道把点击函数的代码放在哪里我把主题放在一个css文件中，第一个sn-p放在一个javascript文件中跨度>
重新阅读您的问题后，问题可能是您加载脚本的顺序。如果您在index.js 中使用jQuery，则必须在index.js 之前包含jQuery。尝试交换两个script 标签。

【解决方案3】：

如果你想保持上次点击颜色的状态，你需要在服务器上保存一些数据。每次进行硬页面重新加载时，DOM 都会刷新。但是，数据库数据会维护您可以在每次页面加载时获取的数据。单击其中一个按钮时，您可以更新此数据库数据。你有不同的方法来实现这一点。一个例子可能是：

.theme-styling{
  <?php echo getDarkOrLightThemeCode(); ?>
}

然后在 DOM 中，您可以将主题样式分配给具有明暗元素样式的特定元素：

<button class="btn btn-large theme-styling">Hello</button>
<button class="btn btn-large theme-styling">Goodbye</button>

如果您想要除了深色和浅色主题样式之外的其他样式，您可以将id 添加到特定元素。

然后具体来说，当用户单击深色主题按钮或浅色主题按钮时，您应该创建一个 AJAX 请求来更新服务器上的变量属性。

【讨论】：

【解决方案4】：

试试这个：

var element = document.querySelector('body'),
    button  = document.querySelector('#myButton');

button.addEventListener('click',function(){

    if(element.className == 'MyLightPage'){

        element.className = 'MyDarkPage';

    }else{

        element.className = 'MyLightPage';

    }

});

【讨论】：

我必须处理三个文件 index.html ,index.css ,index.js 所以你能告诉我在每个文件中放什么