单击按钮更改响应式网站的主题答案

【问题标题】：change theme of the responsive website on button click单击按钮更改响应式网站的主题
【发布时间】：2013-06-26 08:09:22
【问题描述】：

我有四种类型的 CSS 文件，因此我可以在台式机、移动设备和平板电脑上打开我的网站。我在外部 javascript 页面中通过 javascript 函数调用了 CSS 页面，并在索引页面中调用了脚本标记。我写的代码在下面，但问题不在于它工作正常。现在使用相同的概念，我想更改在所有设备（即移动设备、平板电脑、台式机或任何宽屏幕）中打开的网站的主题颜色。所以我真正的问题是。请给我一些建议。

这里的代码是我在 .js 文件中用于调用所有 css 的响应式站点

function adjustStyle(width) {
    width = parseInt(width);
    if (width < 350) {
        $("#size-stylesheet").attr("href", "css/mobile.css");
        } else if ((width >= 351) && (width < 600)) {
        $("#size-stylesheet").attr("href", "css/narrow.css");
    } else if ((width >= 601) && (width < 900)) {
        $("#size-stylesheet").attr("href", "css/medium.css");
    }else {
       $("#size-stylesheet").attr("href", "css/wide.css"); 
    }
}

$(function() {
    adjustStyle($(this).width());
    $(window).resize(function() {
        adjustStyle($(this).width());
    });
});

现在要更改主题颜色，我必须为所有 css 编写更多 css。我是设计响应式网站的新手，我们将不胜感激任何帮助并接受所有建议。

【问题讨论】：

我建议你使用media queries。它是一个单一的 css 文件，其中包含针对不同分辨率和设备的嵌套 css。
是的，你为什么不使用媒体查询？
我粘贴的代码运行良好，我的网站是响应式网站。一切都很好，但是现在当我想通过单击颜色按钮来添加更改主题颜色等功能时，我必须为所有将打开我的网站和所有颜色的系统编写四个 css 页面。我不知道如何使用我上面使用的相同功能来做到这一点。这是我真正想要的
媒体查询至少对我来说在 Internet Explorer 中不起作用。如果它对你们有用，请建议我代码

标签： javascript jquery css

【解决方案1】：

如果构建一个响应式网站，我会选择fluid layout together with media queries。那么应该不需要针对不同宽度的不同 css 文件，除非设计在不同宽度之间发生巨大变化。（我认为它不应该这样做，因为这可能只会让用户感到困惑。）

为了在单击按钮时更改网站的颜色主题，我会做一些类似于您现在对不同宽度的 css 文件所做的事情。

我会将与颜色有关的所有内容提取到它自己的 css 文件中，并将其命名为例如 default-theme.css。如果我想通过单击按钮切换到深色主题，我将创建一个名为 dark-theme.css 的新 css 文件，并将以下函数注册到按钮的 onclick-event 中：

function adjustTheme(width) {
    $("#theme-stylesheet").attr("href", "css/dark-theme.css");
}

【讨论】：

如果您希望浏览器在访问之间记住选择的主题，liyakat 答案中的链接看起来很有希望，除非您有反对 cookie 的内容。
是的，我接受这个答案，您的回答是正确的，但我已经尝试过了，但它对我不起作用。既然你已经理解了我的问题，有没有其他的选择可以告诉我
好的，我使用媒体查询，你能告诉我它在 Internet Explorer 上的工作原理吗，因为它不适用于我的情况，但它适用于 chrome 和 firefox
如果您希望媒体查询在 IE8 及更早版本中工作，您可以尝试respond.js。（据我所知，它们应该已经在 IE9 及更高版本中工作了。）
感谢@meliasson 发送respond.js。这就是我想要的。

【解决方案2】：

我建议只使用单个 css 文件。因为很难在单独的 css 文件中维护所有内容。您可以使用 css 媒体查询：Css3 Media Query。示例

@media screen and (max-width: 300px) {
body {
    background-color: lightblue;
}

}

【讨论】：

【解决方案3】：

    <!DOCTYPE html>
    <html lang="en">
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" 
    rel="stylesheet">
<!-- purple-theme.css is the default theme. I have maintained 3 more css files, red-theme.css, blue-theme.css and green-theme.css in the same css location -->

    <link rel="stylesheet" href="purple-theme.css" class="change-theme" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> 
    </script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"> 
    </script>
    <script>
    $(document).on('click', ".btn-color-change", function() {
        $(".change-theme").attr("href", this.id + "-theme.css");
    });
    </script>
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    </head>
    <body>
    <div>
        <button id="red" class="btn-color-change">Red theme</button>
        <button id="green" class="btn-color-change">Green theme</button>
        <button id="blue" class="btn-color-change">Blue theme</button>
        <button id="purple" class="btn-color-change">Purple theme</button>
    </div>
    <div class="row">
        <div class="col-md-3 color-theme" style="border:5px solid white">
            Keep looking up… that’s the secret of life. - Charlie Brown</div>
    </div>
    <div class="col-md-3 color-theme" style="border:5px solid white">
        The first step is you have to say that you can. - Will Smith
    </div>
    </div>
    </body>
    </html>

【讨论】：