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, May 31 '11 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, May 31 '11 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, May 31 '11 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, May 31 '11 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, May 31 '11 at 13:30
So I don't know if javascript is the best solution for this. — oshirowanen, May 31 '11 at 13:31
That you lacked the foresight to design your code modularly in the first place is no excuse to take the wrong approach now! — Lightness Races in Orbit, May 31 '11 at 13:32
@oshirowanen as @Rob says, doing this on server side would be vastly better, a JS based solution might not work optimally, and won't work at all if JS is turned off. It might be worth editing each PHP file, and adding a link to a central include file that defines which style sheet gets included — Pekka, May 31 '11 at 13:32
@Tomalak Geret'kal, how does this comment solve the "current" problem? — oshirowanen, May 31 '11 at 13:33
@oshirowanen: Comments are not answers. See my answer for the solution. — Lightness Races in Orbit, May 31 '11 at 13:34
@Pekka, I understand that using a serverside approach would be best, but trying to edit 1000's of serverside files is out of the question unfortunately. — oshirowanen, May 31 '11 at 13:35
@oshirowanen: How will that be different if you use Javascript? Where will you instead make the changes? — Lightness Races in Orbit, May 31 '11 at 13:38
@Tomalak Geret'kal, I have no idea, which is why I have posted the quesiton here. — oshirowanen, May 31 '11 at 13:45
I have updated the question. The previous question did not make sense. — oshirowanen, May 31 '11 at 13:49

score 5 · Accepted Answer · answered May 31 '11 at 13:31

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 '11 at 13:31

Lightness Races in Orbit

378,754
76
643
1,055

+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. – lonesomeday May 31 '11 at 13:35
I have updated the question. The previous question did not make sense. – oshirowanen May 31 '11 at 13:49
@oshirowanen: I think you should have deleted it and created a new one. This is barely related. – Lightness Races in Orbit May 31 '11 at 14:15

Bakudan · Answer 2 · 2011-05-31T14:09:23.220

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 '11 at 14:09

answered May 31 '11 at 14:02

Bakudan

19,134
9
53
73

score 0 · Answer 3 · edited May 23 '17 at 10:28

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 '17 at 10:28

Community

1
1

answered May 31 '11 at 13:37

Jeroen

60,696
40
206
339

I have updated the question. The previous question did not make sense. – oshirowanen May 31 '11 at 13:49
1

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 ;) – Jeroen May 31 '11 at 17:58

Changing CSS based on querystring

3 Answers3