Javascript/jquery change css depending on url

Question

I need to create a script thant changes the css of a page, depending on a url inserted by the user.

For example

If I use this url: http://mypage.com/ It shows this css: <link rel="stylesheet" type="text/css" href="cssfolder/style.css">

But I need if I use this url for example: http://mypage.com/#color1 (or another url format you consider is better to achieve the same)

I need to change it for the new css, based on the url, and overwrite it, showing this: <link rel="stylesheet" type="text/css" href="cssfolder/user1.css">

I need it uses the css based on the url, replacing the css file name.

This way if a user enters the site http://mypage.com/#color1 it will show the blue.css (changing everything to blue, change logo to blue...) and if enters http://mypage.com/#red, css changes to red.css, showing everything red, but the content is exactly the same.

Anyone has any idea how this can be done?

yes it is. Have you tried it?

Fallenreaper
– Fallenreaper

2014-06-27 19:28:04 +00:00
Commented Jun 27, 2014 at 19:28 — Fallenreaper
– Fallenreaper, Commented Jun 27, 2014 at 19:28

Fallenreaper · Accepted Answer · 2014-06-27 19:34:06Z

3

This will get your hash value you and load it. If you are changing the # at runtime, you will need to make sure you delete the previous, but this is assuming you will just do this once.

var hash_var = window.location.hash;
if (hash_var){
    $("<link />").attr({
      rel:"styleheet", 
      type:"text/css",
      href:hash_var.substring(1) + ".css"
    }).appendTo("head");
}

answered Jun 27, 2014 at 19:34

Fallenreaper

10.8k15 gold badges77 silver badges143 bronze badges

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

4 Comments

Chris Fadu Uba Over a year ago

Thanks for replying Fallenreaper! I added this to the first part of my code, but it's not changing the css, what can I have done wrong?

Fallenreaper Over a year ago

What browser are you using? ALSO: check the javascript console, the Sources, to see if it is added to the sources?

Fallenreaper Over a year ago

ALSO: you need to make sure that it is IN the folder of the file. You know? Some people store css files in a css folder. You would want to make sure that the dir structure is correct

Fallenreaper Over a year ago

i posted 2 comments. Read them and let me know what you see

Collectives™ on Stack Overflow

Javascript/jquery change css depending on url

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