如何动态更改正在查看的网站的CSS样式表？

Question

我有一个网站，用户可以使用向导生成自己的Codeigniter网站，用户将提供模块，字段和功能详细信息。 根据用户输入，我的网站将生成并部署一个网站，并在下载之前向用户显示演示。 一切正常。

现在我计划允许用户在预览时为生成的网站选择不同的样式/主题。 如何让用户在不重新加载整个页面的情况下立即查看更改？

我尝试使用所选样式替换生成的网站上的样式表文件，并重定向到生成的网站上的另一个页面。 但是使用相同的样式表文件，因为它已经被浏览器缓存。 所以请给我一些选择。 如果可以在不重定向用户的情况下完成，那么对我来说这将是最好的选择。

Answer 1

为了防止缓存问题，样式表需要具有不同的名称。 以下是如何使用jQuery实现它的示例： http ： //www.cssnewbie.com/simple-jquery-stylesheet-switcher/

演示

Answer 2

将变量传递给视图，该变量是否包含样式表文件名的值？ 至于当用户在同一页面时更改样式文件...请参阅此问题： 是否有一种简单的方法可以在不重新加载页面的情况下重新加载css？

<?php
$data['stylesheet_name'] = 'user1';

$this->load->view('viewname', $data);

/**
 * View File
 **/

<link rel="stylesheet" type="text/css" href="/css/user/<?= $stylesheet_name; ?>.css" />

Answer 3

我使用了以下代码，它无需更改样式表文件名即可运行。

function reloadStylesheets() {
    var queryString = '?reload=' + new Date().getTime();
    $('link[rel="stylesheet"]').each(function () {
        this.href = this.href.replace(/\?.*|$/, queryString);
    });
}

这会强制浏览器重新加载文件，因为参数因时间变化而发生变化。

Answer 4

这对我来说可以替换单个样式表。 样式表被命名为“themegray”，“themeblue”，“themegreen”等。“t”代表新颜色，例如“blue”。

function flipTheme(t) {
    $('link[rel="stylesheet"]').each(function () {
        if (this.href.indexOf(theme)>=0) {
            this.href = this.href.replace(theme, t);
            theme = t;
        }
    });
}