javascript - How to change the css stylesheet dynamically for a website being viewed? - Stack Overflow

admin管理员组

文章数量:1333210

I have a website where users can generate their own Codeigniter websites using a wizard in it users will provide module, fields and functions details. Based on the user input a website will be generated and deployed on my website and a demo will be shown to the user before they go with the download. Everything works fine.

Now I am planning to allow users to choose different styles/themes for the generated website when they are previewing it. How can allow users to see their changes immediately without reloading the entire page?

I tried by replacing their style sheet file on the generated website with the selected style and redirected to another page on the generated website. But the same style sheet file is used since it is already cached by browser. So please give me some options. If that can be done without redirecting the user it will be the best option for me.

I have a website where users can generate their own Codeigniter websites using a wizard in it users will provide module, fields and functions details. Based on the user input a website will be generated and deployed on my website and a demo will be shown to the user before they go with the download. Everything works fine.

Now I am planning to allow users to choose different styles/themes for the generated website when they are previewing it. How can allow users to see their changes immediately without reloading the entire page?

I tried by replacing their style sheet file on the generated website with the selected style and redirected to another page on the generated website. But the same style sheet file is used since it is already cached by browser. So please give me some options. If that can be done without redirecting the user it will be the best option for me.

• javascript
• ajax
• codeigniter

Share Improve this question Follow asked Jul 17, 2012 at 12:34 NishNish 2,36622 gold badges1414 silver badges1919 bronze badges 4

• Use different names for your stylesheets, like style-blue.css, style-green.css – Robert Commented Jul 17, 2012 at 12:38
• But how can I change the style file when user is in the same page? – Nish Commented Jul 17, 2012 at 12:47
• But the same style sheet file is used since it is already cached by browser.. How about using a Cache-Control: no-cache header on the CSS file, forcing the browser to re-fetch it each time? You could also serve the CSS from an MVC action (if codeingineter has that) and not from a physical file. – user2173353 Commented Mar 22, 2017 at 9:13
• Does this answer your question? Replacing css file on the fly (and apply the new style to the page) – Liam Commented Nov 4, 2022 at 16:49

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 1

pass a variable to the view, the variable holds the value of the filename of the stylesheet? As far as changing the style file when the user is in the same page... see this question: 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" />

I have used the below code and it is working without the need of changing the style sheet file name.

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

This forces browser to reload the file since the parameter changed because of the time change.

This worked for me to replace a single stylesheet. The stylesheets are named "themegray", "themeblue", "themegreen", etc. "t" represents the new color, such as "blue".

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

本文标签： javascriptHow to change the css stylesheet dynamically for a website being viewedStack Overflow