如何为正在查看的网站动态更改 css 样式表？答案

【问题标题】：How to change the css stylesheet dynamically for a website being viewed?如何为正在查看的网站动态更改 css 样式表？
【发布时间】：2012-07-16 09:03:07
【问题描述】：

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

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

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

【问题讨论】：

为您的样式表使用不同的名称，例如 style-blue.css、style-green.css
但是当用户在同一页面时如何更改样式文件？
But the same style sheet file is used since it is already cached by browser.。在 CSS 文件中使用 Cache-Control: no-cache 标头如何强制浏览器每次都重新获取它？您还可以从 MVC 操作（如果 codeingineter 有）而不是从物理文件中提供 CSS。

标签： javascript ajax codeigniter

【解决方案1】：

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

Demo

【讨论】：

感谢您的回答。我在用户生成的 web 目录中只有一个样式表，并用选定的样式覆盖它。我不想向用户提供所有样式表，只提供选定的样式。所以我期待是否可以在不加载网页的情况下单独重新加载样式表。这样我就不需要更改任何服务器端编码。如果没有更多选择，我会选择这个。

【解决方案2】：

将一个变量传递给视图，该变量保存样式表文件名的值？至于当用户在同一页面时更改样式文件......请参阅这个问题：Is there an easy way to reload css without reloading the page?

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

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

/**
 * View File
 **/

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

【讨论】：

感谢您提供对我来说很好的问题的链接。

【解决方案3】：

我使用了下面的代码，它无需更改样式表文件名即可工作。

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

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

【讨论】：

【解决方案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;
        }
    });
}

【讨论】：

你好，可以分享一下jsfiddle演示如何使用吗？