Changing CSS based on querystring

Question

Using jquery, is it possible to swap the whole css file with another css file based on a querystring parameter?

For example, if the url is http://mysite.com/page1.php?style=1

This should use style1.css

If the url is http://mysite.com/page1.php?style=2

This should use style2.css

How can this be done with jquery

Why the arbitrary jQuery requirement? How do you know that jQuery provides a valid solution to this? — Lightness Races in Orbit
– Lightness Races in Orbit, Commented May 31, 2011 at 13:25
Since it looks like you are using PHP, I'd recommend detecting the query string there and changing your stylesheet accordingly. Using jQuery, there may be a flash of unstyled content while it loads and changes the CSS files. — Rob
– Rob, Commented May 31, 2011 at 13:27
if I said, "can this be done with jquery", I would have gotten strange answers like "yes", without out showing how it can be done with jquery. I would prefer not to use raw javascript. — oshirowanen
– oshirowanen, Commented May 31, 2011 at 13:28
@oshirowanen: FWIW, it's unlikely that any Javascript at all is your best approach. Why not do it in PHP? — Lightness Races in Orbit
– Lightness Races in Orbit, Commented May 31, 2011 at 13:29
Basically, the pages already exist, thousands of them. I don't want to have to go and edit every single page. But at the same time, I need all the old pages to keep the old style sheet. I want the old pages to only use the new style sheet if they are requested from a certain page. — oshirowanen
– oshirowanen, Commented May 31, 2011 at 13:30

Lightness Races in Orbit · Accepted Answer · 2011-05-31 13:31:14Z

5

This doesn't strictly answer the question posed, but it best solves the problem:

Do it in PHP.

<html>
   <head>
      <?php
      if (!is_numeric(@$_GET['style']))
         die("No style ID given!");

      echo '<link rel="stylesheet" href="style' . $_GET['style'] . '.css" />';
      ?>
   </head>

   <body>
   </body>
</html>

answered May 31, 2011 at 13:31

Lightness Races in Orbit

387k77 gold badges670 silver badges1.1k bronze badges

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

3 Comments

lonesomeday Over a year ago

+1 Though I'd probably do if (!is_numeric(@$_GET['style'])) $style = 0; and use a default stylesheet rather than ending the script because the query parameter didn't exist.

oshirowanen Over a year ago

I have updated the question. The previous question did not make sense.

Lightness Races in Orbit Over a year ago

@oshirowanen: I think you should have deleted it and created a new one. This is barely related.

Bakudan · Accepted Answer · 2011-05-31 14:09:23Z

2

link - http://mysite.com/page1.php?style=2

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

if ( location.search )
{
   var style = location.search.replace("?","").split("=");
   if ( style[0] === "style" && parseInt( style[1]) === 2 )
   {
      $("link").attr("href","style2.css");
   }
}

Based on your question before the edit. Tested on Chrome

edited May 31, 2011 at 14:09

answered May 31, 2011 at 14:02

Bakudan

19.5k9 gold badges56 silver badges76 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 10:28:50Z

0

+1 for the server-side solution given by Tomalak

However, if you want to check the query string client side there are possibilities, check out this one for example:

How can I get query string values in JavaScript?

edited May 23, 2017 at 10:28

CommunityBot

11 silver badge

answered May 31, 2011 at 13:37

Jeroen

64.4k47 gold badges231 silver badges372 bronze badges

2 Comments

oshirowanen Over a year ago

I have updated the question. The previous question did not make sense.

Jeroen Over a year ago

Hehe question makes more/other sense now, but you should consider deleting the current question and re-asking the question you wanted to as: with all the current replies I don't think this thread can be helpful anymore to ppl who stumble to this corner of the interwebz ;)

Collectives™ on Stack Overflow

Changing CSS based on querystring

3 Answers 3

3 Comments

Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

2 Comments

Linked

Related