jquery 更改按钮点击响应网站的主题

d7v8vwbk 于 2022-11-03 发布在 jQuery

关注(0)|答案(4)|浏览(130)

我有四种类型的CSS文件，这样我就可以打开我的网站在桌面，移动的和平板电脑。我已经调用了CSS页面通过javascript函数在外部javascript页面和调用脚本标签在索引页。我写的代码如下，但问题是不是，因为它的工作很好。现在使用这个相同的概念，我想改变主题颜色的网站，打开所有即移动，平板电脑，桌面或任何宽屏。所以我真实的的问题是。请给我一些建议。
这里代码是我在.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。我是一个全新的设计一个响应网站，任何帮助将不胜感激，所有的建议将被接受。

jquery

来源：https://stackoverflow.com/questions/17314797/change-theme-of-the-responsive-website-on-button-click

4条答案

按热度按时间

vlju58qv1#

如果构建一个响应式网站，我会选择fluid layout together with media queries。这样就不需要为不同的宽度使用不同的css文件了，除非不同宽度之间的设计发生了巨大的变化。（我认为这不应该，因为这可能会让用户感到困惑。）
为了改变一个按钮点击网站的颜色主题，我会做一些类似于你现在正在做的不同宽度的css文件。
我会将所有与颜色有关的内容提取到自己的css文件中，并将其命名为default-theme.css。如果我想通过单击按钮切换到深色主题，我会创建一个新的css文件，例如dark-theme.css，并将类似以下的函数注册到按钮的onclick-event中：

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

赞(0）回复(0）举报 2022-11-03

bpsygsoo2#

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

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

}

赞(0）回复(0）举报 2022-11-03

5rgfhyps3#

<!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>

赞(0）回复(0）举报 2022-11-03

mwngjboj4#

如果你正在考虑一个黑暗的主题或光明的团队为您的网站您可以做到这一点自动与CSS只如果你想要一个切换您可以这样做手动太

自动更改主题

为此，您可以使用prefers-color-scheme，将其设置为dark或light。示例代码：
第一个

手动切换主题

您也可以使用创建的类手动切换它，例如.dark-mode或.light-mode。示例代码：
第一个
最后，手动和自动一起
只需将它们结合起来，就可以为您的问题提供一个简单的解决方案。示例代码：
第一个

提醒您一下...

标头上使用的每个 meta标记都有其用途。

<!-- This tells the browser your website supports both dark and light theme, preferring the dark version-->
    <meta name="color-scheme" content="dark light" />
    <!-- This tells the browser to look the preferred styles on the media query-->
    <meta name="theme-color" media="(prefers-color-scheme: dark)" />
    <meta name="theme-color" media="(prefers-color-scheme: light)" />

赞(0）回复(0）举报 2022-11-03

我来回答

jquery 更改按钮点击响应网站的主题

4条答案

自动更改主题

手动切换主题

提醒您一下...

相关问题

热门标签

最新问答