jQuery append external css file to all HTML pages

Question

I have 2 different CSS files for 2 clients

If I select option 1 from indexer page, all inside html pages should append below css file:

<link rel="stylesheet" type="text/css" href="css/client1.css">

or if I select option 2, then it should load below css file:

<link rel="stylesheet" type="text/css" href="css/client2.css">

But, this change has to happen for all the html files which is under pages/

Indexer.html

<select class="selInput" id="selectClient">
    <option>-- Select Client --</option>
    <option value="client1">Client 1</option>
    <option value="client2">Client 2</option>
</select>

<script>
$(document).ready(function(){

    $( document ).on( "change", "#selectClient", function(){
        jQuery(this).find("option:selected").each(function(){
            if($(this).attr("value")=="client1-script"){
                $("body").load("css/client1.css");
            }
            else if($(this).attr("value")=="client2-script"){
                $("body").load("css/client2.css");
            }
        });
    });

});

</script>

why not include 2 of those files. then just add or remove class on the body accordingly? — roullie
– roullie, Commented Dec 22, 2015 at 9:41
Hi @Praveen Kumar... Sorry, that was just for demo.. I do not have much idea on script :( — Reddy
– Reddy, Commented Dec 22, 2015 at 9:43
Hi @roullie.. in that case, I want to class to all html pages which is under pages/ foler — Reddy
– Reddy, Commented Dec 22, 2015 at 9:44
@Reddy then you have to save the selected option somewhere. database,session,cookies it's your choice. — roullie
– roullie, Commented Dec 22, 2015 at 9:48

Praveen Kumar Purushothaman · Accepted Answer · 2015-12-22 09:45:21Z

1

You have two options to do:

Load Both CSS and use classes to have difference in them.

Consider client1.css:

body.client1 { /* rules */ }
body.client1 h1 { /* rules */ }
body.client1 p { /* rules */ }
body.client1 ul,
body.client1 ol { /* rules */ }

Consider client2.css:

body.client2 { /* rules */ }
body.client2 h1 { /* rules */ }
body.client2 p { /* rules */ }
body.client2 ul,
body.client2 ol { /* rules */ }

And in your HTML:

<body class="client1"> <!-- if client 1 -->
<body class="client2"> <!-- if client 2 -->

In your JavaScript:

$(function () {
    $("body").on("change", "#selectClient", function () {
        $("#body").removeClass("client1 client2").addClass("client" + $(this).val());
    });
});

Use a <link /> with id and change the href.

In your <head>:

<link rel="stylesheet" type="text/css" href="css/client1.css" id="style" />

In your JavaScript:

$(function () {
    $("body").on("change", "#selectClient", function () {
        $("#style").attr("href", "css/client" + $(this).val() + ".css");
    });
});

answered Dec 22, 2015 at 9:45

Praveen Kumar Purushothaman

167k27 gold badges215 silver badges261 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Reddy Over a year ago

@Praveen Kumar... Thanks for your time, it is applying for only current page... but I want is: In index.html, If I select client1 option, this page navigates to client.html page with "client1.css" file loaded.. and also remaining html pages also should load the client1.css file... Is it possible please?

Praveen Kumar Purushothaman Over a year ago

@Reddy I suggest you go for this plugin: jQuery.cookie and set it when you change.

Reddy Over a year ago

@Praveen Kumar Thanks again... will go through it, and upvote your answer as well :)...

Praveen Kumar Purushothaman Over a year ago

@Reddy All the best then.

Collectives™ on Stack Overflow

jQuery append external css file to all HTML pages

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related